Compila interfaces adaptables para el usuario con consultas de medios de preferencia

1. Antes de comenzar

En la actualidad, los usuarios indican muchas preferencias en sus dispositivos. Quieren que el sistema operativo y las apps se vean y se sientan como propios. Las interfaces adaptables al usuario son aquellas que están listas para usar estas preferencias con el objetivo de mejorar la experiencia del usuario, para que se sienta más como en casa, para que se sienta como propia. Si se hace correctamente, es posible que el usuario nunca sepa que la experiencia del usuario se está adaptando o se adaptó.

Preferencias del usuario

La elección del hardware del dispositivo es una preferencia, el sistema operativo es una elección, los colores de la app y de los sistemas operativos son preferencias, y los idiomas de los documentos de la app y de los sistemas operativos son preferencias. La cantidad de preferencias que tiene un usuario parece aumentar. Una página web no puede acceder a todo y por una buena razón.

Estos son algunos ejemplos de preferencias de los usuarios que los CSS pueden usar:

• Tamaño del viewport para dispositivos
• Orientación del dispositivo (vertical u horizontal)
• Tamaño de fuente
• En línea o sin conexión
• Calidad de la red
• Esquema de colores (claro | oscuro)
• Animaciones de la interfaz (activadas o reducidas)
• Calidad de la entrada (mouse | táctil | pluma stylus)
• Dirección del documento y modo de escritura (de izquierda a derecha, de arriba abajo y más)
• Modo de visualización (pantalla completa | independiente | IU mínima | navegador)

Estos son algunos ejemplos de preferencias del usuario que próximamente estarán disponibles en CSS:

• Modo lite o de datos reducidos
• Rango de colores
• Contraste (menos | más | reducir)
• Colores (fuerza los colores del usuario en la página)
• Sonido ambiente (activado | reducido)

Consultas de medios

CSS y la Web permiten la adaptación y la responsividad a través de consultas de medios, una condición declarativa que contiene un conjunto de estilos si esa condición es verdadera. La más común es una condición sobre el tamaño del viewport del dispositivo: si el tamaño es inferior a 800 píxeles, aquí tienes algunos estilos mejores para ese caso.

Adaptación al usuario

Una interfaz no adaptable es aquella que no cambia nada cuando un usuario la visita, lo que, en esencia, ofrece una experiencia para todos sin posibilidad de ajuste. Una interfaz adaptable al usuario podría tener cinco apariencias y estilos diferentes para cinco usuarios distintos. La funcionalidad es la misma, pero la estética se percibe mejor y la usabilidad de la interfaz es más sencilla para los usuarios que pueden ajustar la IU.

Requisitos previos

• Conocimientos de HTML y CSS
• Conocimientos de herramientas para desarrolladores, como las Herramientas para desarrolladores de Google Chrome

Qué compilarás

En este codelab, compilarás un formulario que se adapta al usuario según lo siguiente:

• La preferencia de esquema de colores del sistema, ya que ofrece un esquema de colores claros y oscuros para los controles de formulario y los elementos de la IU circundantes
• Las preferencias de movimiento del sistema, ya que ofrece varios tipos de animaciones
• Verports de dispositivos pequeños y grandes para ofrecer experiencias en dispositivos móviles y computadoras de escritorio
• Varios tipos de entrada, como teclado, lector de pantalla, entrada táctil y mouse
• Cualquier idioma y modo de lectura o escritura

Qué aprenderás

En este codelab, aprenderás sobre las funciones web modernas que te ayudarán a crear un formulario que se adapte al usuario. Aprenderás a hacer lo siguiente:

• Crea temas claros y oscuros
• Crea formularios animados y accesibles
• Diseño de formularios responsivos
• Usa unidades relativas y propiedades lógicas.

Este codelab se enfoca en las interfaces adaptables para el usuario. Los conceptos y los bloques de código no relacionados con esos temas se abordan superficialmente y se proporcionan para que simplemente los copies y pegues.

Requisitos

• Google Chrome 89 o versiones posteriores, o tu navegador preferido

2. Prepárate

Obtén el código

Todo lo que necesitas para este proyecto se encuentra en un repositorio de GitHub. Para comenzar, deberás obtener el código y abrirlo en tu entorno de desarrollo favorito. Como alternativa, puedes bifurcar este Codepen y trabajar desde allí.

Recomendación: Usa Codepen

1. Abra una nueva pestaña del navegador.
2. Ve a https://codepen.io/argyleink/pen/abBMeeq.
3. Si no tienes una cuenta, crea una para guardar el trabajo.
4. Haz clic en Fork.

Alternativa: Trabaja de forma local

Si quieres descargar el código y trabajar de forma local, necesitarás tener instalada la versión 12 o una posterior de Node.js y un editor de código configurado y listo para usar.

Usa Git

1. Visita https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces.
2. Clona el repositorio en una carpeta.
3. Observa que la rama predeterminada es beginning.

Usa archivos

Descargar código fuente

1. Descomprime el archivo ZIP descargado en una carpeta.

Ejecuta el proyecto

Usa el directorio del proyecto establecido en cualquiera de los pasos anteriores y, luego, haz lo siguiente:

1. Ejecuta npm install a fin de instalar las dependencias necesarias para ejecutar el servidor.
2. Ejecuta npm start para iniciar el servidor en el puerto 3000.
3. Abra una nueva pestaña del navegador.
4. Ve a http://localhost:3000.

Acerca del HTML

En esta lección, se abordarán los aspectos del HTML que se usan para admitir la interactividad adaptable al usuario. Este taller se enfoca específicamente en CSS. Vale la pena revisar el código HTML proporcionado si eres principiante en la creación de formularios o sitios web. Las elecciones de elementos HTML pueden ser fundamentales en lo que respecta a la accesibilidad y el diseño.

Cuando todo esté listo para comenzar, este será el esqueleto de lo que transformarás en una experiencia del usuario dinámica y adaptable.

3. Interacciones adaptables

Rama de Git: beginning

Al final de esta sección, tu formulario de configuración se adaptará a lo siguiente:

• Control de juegos y teclado
• Mouse y pantalla táctil
• Lector de pantalla o tecnología de accesibilidad similar

Atributos para el HTML

El HTML que se proporciona en el código fuente es un excelente punto de partida, ya que se eligieron elementos semánticos para ayudar a agrupar, ordenar y etiquetar las entradas de tu formulario.

Los formularios suelen ser un punto de interacción clave para una empresa, por lo que es importante que se puedan adaptar a los muchos tipos de entrada que la Web puede facilitar. Por ejemplo, es probable que sea importante tener un formulario que se pueda usar en dispositivos móviles con funciones táctiles. En esta sección, antes del diseño y el estilo, debes garantizar la usabilidad de la entrada adaptable.

Agrupación de entradas

El elemento <fieldset> en el código HTML sirve para agrupar entradas y controles similares. En tu formulario, tienes dos grupos: uno para el volumen y otro para las notificaciones. Esto es importante para la experiencia del usuario, ya que permite omitir secciones enteras.

Ordena elementos

El orden de los elementos se proporciona en un orden lógico. Esto es importante para la experiencia del usuario, de modo que el orden de la experiencia visual sea el mismo o similar para las tecnologías de control de juegos, teclado o lector de pantalla.

Interacción con el teclado

Los usuarios de la Web se acostumbraron a moverse por los formularios con la tecla Tab, de lo que, afortunadamente, se encarga el navegador si proporcionas los elementos HTML esperados. El uso de elementos como <button>, <input>, <h2> y <label> se convierte automáticamente en destinos de teclado o lector de pantalla.

En el video anterior, se muestra cómo la tecla Tab y las flechas pueden moverse por la interfaz y realizar cambios. Sin embargo, el contorno azul está muy ajustado alrededor de los elementos de entrada. Agrega los siguientes estilos para que esta interacción tenga un poco de espacio.

style.css

input {
  outline-offset: 5px;
}

Qué puedes probar

1. Revisa los elementos HTML que se usan en index.html.
2. Haz clic en la página de demostración en tu navegador.
3. Presiona las teclas tab y shift+tab para mover el enfoque de los elementos por el formulario.
4. Usa el teclado para cambiar los valores de los controles deslizantes y las casillas de verificación.
5. Conecta un control de juegos Bluetooth y mueve el enfoque del elemento por el formulario.

Interacción con el mouse

Los usuarios de la Web se acostumbraron a interactuar con los formularios con el mouse. Intenta usar el mouse en el formulario. Los controles deslizantes y las casillas de verificación funcionan, pero puedes hacerlo mejor. Esas casillas de verificación son bastante pequeñas para hacer clic con el mouse.

¿Ves cómo obtienes dos funciones de experiencia del usuario para conectar tus etiquetas y sus entradas?

La primera característica es tener opciones con las que interactuar, y la etiqueta es mucho más fácil de seleccionar con un mouse que un cuadrado pequeño.

La segunda función es saber exactamente para qué entrada es una etiqueta. Sin CSS, en este momento, es bastante difícil determinar qué etiqueta corresponde a cada casilla de verificación, a menos que proporciones algunos atributos.

Esta conexión explícita también mejora la experiencia de los lectores de pantalla, que se tratan en la siguiente sección.

Sin asociación: No hay atributos que conecten los elementos.

<input type="checkbox">
<label>...</label>

Asociados: Atributos que conectan los elementos

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

El HTML proporcionado ya atribuyó todas las entradas y etiquetas. Vale la pena investigar más si este es un concepto nuevo para ti.

Qué puedes probar

1. Coloca el cursor sobre una etiqueta y observa cómo se destaca la casilla de verificación.
2. Investiga un elemento de etiqueta con las herramientas para desarrolladores de Chrome para visualizar el área de superficie en la que se puede hacer clic y que puede seleccionar la casilla de verificación.

Interacción con el lector de pantalla

La tecnología de accesibilidad puede interactuar con este formulario y, con algunos atributos HTML, puede hacer que la experiencia del usuario sea más fluida.

Para los usuarios que navegan por el formulario actual con un lector de pantalla en Chrome, hay una detención innecesaria en el elemento <picture> (no específico de Chrome). Es probable que un usuario con un lector de pantalla lo use debido a una discapacidad visual, por lo que detenerse en una imagen no es útil. Puedes ocultar elementos de los lectores de pantalla con un atributo.

index.html

<picture aria-hidden="true">

Ahora, los lectores de pantalla omiten el elemento que era puramente visual.

El elemento deslizante input[type="range"] tiene un atributo ARIA especial: aria-labelledby="media-volume". Esto proporciona instrucciones especiales para que el lector de pantalla las use y mejore la experiencia del usuario.

Qué puedes probar

1. Usa la tecnología de lector de pantalla de tu sistema operativo para mover el foco por el formulario.
2. Descarga y prueba algún software de lector de pantalla en el formulario.

4. Diseños adaptables

Rama de Git: layouts

Al final de esta sección, la página de configuración hará lo siguiente:

• Crea un sistema de espaciado con propiedades personalizadas y unidades relativas del usuario.
• Escribir CSS Grid para lograr una alineación y un espaciado flexibles y responsivos
• Usa propiedades lógicas para diseños adaptables internacionales
• Escribir consultas de medios para adaptar los diseños compactos y espaciosos

Espacios

Una clave para un buen diseño es una paleta limitada de opciones de espaciado. Esto ayuda a que el contenido encuentre alineaciones y armonías naturales.

Propiedades personalizadas

Este taller se basa en un conjunto de siete tamaños de propiedades personalizadas.

• Coloca estos elementos en la parte superior de style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

La nomenclatura se acerca a la verborragia que las personas usarían entre sí para describir el espacio. También usas unidades rem exclusivamente para el tamaño de unidades completas legibles que se adaptan y tienen en cuenta las preferencias del usuario.

Estilos de página

A continuación, debes establecer algunos estilos de documento, quitar los márgenes de los elementos y establecer la fuente en una sans-serif agradable.

• Agrega lo siguiente a style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Ese es tu primer uso de las propiedades personalizadas de espaciado. Así comienza tu viaje espacial.

Tipografía

La fuente de este diseño es adaptable. La palabra clave system-ui usará la fuente de interfaz que el sistema operativo del usuario haya decidido que es la óptima.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Los estilos para h1, h2 y h3 son menores y estilísticos. Sin embargo, el elemento small necesita el line-height adicional para cuando se ajusta el texto. De lo contrario, se amontonará demasiado.

Propiedades lógicas

Observa que el padding en body usa propiedades lógicas (block-start, block-end) para especificar el lado. Las propiedades lógicas se usarán de forma extensiva en el resto del codelab. Al igual que una unidad de rem, también se adaptan al usuario. Este diseño se puede traducir a otro idioma y configurar para que se adapte a la dirección de escritura y de lectura de documentos a la que el usuario está acostumbrado en su idioma nativo. Las propiedades lógicas habilitan la compatibilidad con esto con solo una definición de espacio, dirección o alineación.

La cuadrícula y la caja flexible ya son relativas al flujo, lo que significa que los estilos escritos para un idioma serán contextuales y se aplicarán de forma adecuada para otros. Direccionalidad adaptable: El contenido fluye en relación con la direccionalidad del documento.

Las propiedades lógicas te permiten llegar a más usuarios con menos estilos para escribir.

Diseños de cuadrícula de CSS

La propiedad CSS grid es una potente herramienta de diseño con muchas funciones para abordar tareas complejas. Compilarás algunos diseños de cuadrícula simples y uno complejo. También trabajarás de afuera hacia adentro, desde los diseños macro hasta los micro. Las propiedades personalizadas de espaciado se volverán fundamentales no solo como valores de relleno o margen, sino también como tamaños de columnas, radios de borde y mucho más.

Aquí tienes una captura de pantalla de las Herramientas para desarrolladores de Chrome que superponen cada diseño de cuadrícula de CSS a la vez:

1. Para seguir el proceso, agrega cada uno de los siguientes estilos a style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

De forma predeterminada, Grid coloca cada elemento secundario en su propia fila, lo que lo hace ideal para apilar elementos. También tiene el beneficio adicional de usar gap. Anteriormente, configuraste margin: 0 en todos los elementos con el selector *, que ahora es importante, ya que usas gap para el espaciado. Gap no solo es un lugar único para administrar el espacio en un contenedor, sino que también es relativo al flujo.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Este es el diseño de cuadrícula más complicado, pero tiene en cuenta el aspecto responsivo más interesante:

• max-width proporciona un valor para que el algoritmo de diseño lo use cuando decida qué tan grande puede ser.
• gap usa propiedades personalizadas y pasa un row-gap diferente de column-gap.
• align-items se establece en flex-start para no estirar las alturas de los elementos.
• grid-template-columns tiene una sintaxis compleja, pero el objetivo es conciso: mantener las columnas con un ancho de 35ch y nunca menos de 10ch, y colocar los elementos en columnas si hay espacio; de lo contrario, las filas son una buena opción.

2. Prueba cambiar el tamaño del navegador. Observa cómo el formulario se contrae en filas en un viewport pequeño, pero fluye en columnas nuevas si hay espacio, adaptándose sin consultas de medios. Esta estrategia de estilos responsivos sin consultas de medios es particularmente útil para componentes o diseños centrados en el contenido.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

Cada sección debe ser una cuadrícula de filas con un espacio mediano entre los elementos secundarios.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

Cada encabezado debe ser una cuadrícula de filas con un espacio muy pequeño entre los elementos secundarios.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Este diseño se encarga de crear una apariencia similar a una tarjeta y agrupar las entradas. overflow: hidden y gap: 1px se vuelven claros cuando agregas color en la siguiente sección.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Este diseño se encarga de centrar el ícono y la casilla de verificación con sus etiquetas y controles asociados. La primera columna de la plantilla de cuadrícula, var(--space-lg), crea una columna más ancha que el ícono, de modo que un elemento secundario tenga un lugar donde centrarse.

Este diseño demuestra cuántas decisiones de diseño ya se tomaron en las propiedades personalizadas. El padding, los espacios y una columna se ajustaron dentro de la armonía del sistema con los valores que ya definiste.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Este diseño se encarga de la configuración, el tamaño del círculo del ícono, la creación de una forma de círculo y el centrado de una imagen dentro de él.

Alineación de <picture> y [checkbox]

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Este diseño aísla el centrado de los elementos de imagen y casilla de verificación con el pseudoselector :is.

3. Reemplaza el selector picture > svg por .fieldset-item svg de la siguiente manera:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Esto establece el tamaño del ícono de SVG en un valor del sistema de tamaños.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Esta clase de utilidad es para los elementos de etiqueta de la casilla de verificación para espaciar el texto de ayuda de la casilla de verificación.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Estos estilos aumentan el tamaño de una casilla de verificación con valores de nuestro conjunto de espaciado.

Qué puedes probar

1. Abre las Herramientas para desarrolladores de Chrome y busca las insignias de cuadrícula en el HTML del panel Elementos. Haz clic en ellos para activar las herramientas de depuración.
2. Abre las Herramientas para desarrolladores de Chrome y coloca el cursor sobre un espacio en el panel Estilos.
3. Abre las Herramientas para desarrolladores de Chrome, ve al panel Estilos y cambia de Estilos a Diseños. Explora esta área activando o desactivando sus parámetros de configuración y activando los diseños.

Consultas de medios

El siguiente CSS adapta los estilos según el tamaño y la orientación del viewport con la intención de ajustar el espaciado o la disposición para que sean óptimos según el contexto del viewport.

Nota: El CSS de cada sección se debe agregar después del selector que modifica en style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Estas dos consultas de medios le dan a main más padding a medida que hay más espacio disponible en el viewport. Esto significa que comienza con un relleno compacto y pequeño, pero se vuelve cada vez más espacioso a medida que hay más espacio disponible.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

El formulario ya era responsivo al tamaño del viewport con auto-fit, pero, cuando se prueba en un dispositivo móvil, girar el dispositivo a la orientación horizontal no coloca los dos grupos de formularios uno al lado del otro. Adáptate a este contexto horizontal con una consulta de medios orientation y una verificación del ancho del viewport. Ahora, si el dispositivo está en posición horizontal y tiene al menos 640 píxeles de ancho, fuerza dos columnas cambiando la propiedad personalizada --repeat a un número en lugar de la palabra clave auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Esta consulta de medios es otra expansión de espaciado cuando hay más espacio disponible en el viewport. La plantilla de cuadrícula expande la primera columna con una propiedad personalizada más grande (var(--space-xxl)) en la plantilla. El padding también se aumenta para las propiedades personalizadas más grandes.

Qué puedes probar

1. Expande y contrae el navegador, y observa cómo se ajusta el espacio.
2. Cómo obtener una vista previa en un dispositivo móvil
3. Obtener una vista previa en un dispositivo móvil en modo horizontal

5. Color adaptable

Rama de Git: colors

Al final de esta sección, tu formulario de configuración hará lo siguiente:

• Adaptarse a las preferencias de colores claros y oscuros
• Tener un esquema de colores derivado de un color hexadecimal de la marca
• Tener colores accesibles

HSL

En la siguiente sección, crearás un sistema de colores con HSL para ayudarte a crear un tema claro y uno oscuro. Se basa en este concepto central de CSS: calc().

HSL significa matiz, saturación y luminosidad. El matiz es un ángulo, como un punto en un reloj, mientras que la saturación y la luminosidad son porcentajes. calc() puede realizar operaciones matemáticas con porcentajes y ángulos. Puedes realizar cálculos de luminosidad y saturación en esos porcentajes en CSS. Combina los cálculos de canales de color con propiedades personalizadas y obtendrás un esquema de colores moderno y dinámico en el que las variantes se calculan a partir de un color base, lo que te ayudará a evitar administrar muchos colores en el código.

Propiedades personalizadas

En esta sección, crearás un conjunto de propiedades personalizadas para usarlas en el resto de tus estilos. De manera similar al conjunto de espaciado que creaste antes en la etiqueta :root, agregarás colores.

Supongamos que el color de la marca de tu app es #0af. Tu primera tarea es convertir este valor de color hexadecimal en un valor de color HSL: hsl(200 100% 50%). Esta conversión revela los canales de color de tu marca en HSL, que puedes usar en calc() para calcular varios colores de marca complementarios.

Nota: Esta app prefiere un esquema de colores oscuros y, luego, se adapta a un tema claro. Esto es importante, ya que, cuando crees el primer esquema de colores, será un tema oscuro.

Cada uno de los siguientes bloques de código de esta sección se debe agregar al mismo selector :root.

Canales patrocinados

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Se extrajeron los tres canales de HSL y se colocaron en sus propias propiedades personalizadas.

1. Usa las tres propiedades tal como están y recrea el color de la marca.

Marca

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Como tu esquema de colores es oscuro de forma predeterminada, se recomienda desaturar los colores para usarlos en superficies oscuras (de lo contrario, pueden vibrar a la vista o ser inaccesibles). Para desaturar el color de tu marca, usa el tono y la luminosidad tal como están, pero reduce la saturación a la mitad con una división: calc(var(--saturation) / 2). Ahora, el color de tu marca se ajusta correctamente al tema, pero está desaturado para su uso.

Texto

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Para el texto de lectura en nuestro tema oscuro, usa el matiz de la marca como base, pero crea colores casi blancos a partir de él. Muchos usuarios pensarán que el texto es blanco, cuando en realidad es azul muy claro. Mantenerse dentro del matiz es una forma sólida de crear armonía en el diseño. --text1 tiene un 85% de blanco y --text2 tiene un 65% de blanco, y ambos tienen muy poca saturación.

2. Después de agregar el código a tu proyecto, abre las herramientas para desarrolladores de Chrome y explora cómo cambiar estos valores de canal. Observa cómo interactúan el HSL y sus canales entre sí. Tal vez quieras más o menos saturación.

Surface

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

El texto es muy claro porque las superficies serán oscuras en el modo oscuro. Cuando los colores del texto usaban valores de luminosidad altos (85% y más), las superficies usarán valores más bajos (30% y menos). Tener un intervalo saludable entre los rangos de luminosidad de la superficie y el texto ayudará a garantizar que los colores sean accesibles para que los usuarios puedan leerlos.

3. Observa cómo los colores comienzan en el gris más oscuro con un 10% de luminosidad y un 10% de saturación, y luego se desaturan a medida que se vuelven más claros. Cada superficie nueva es un 5% más clara que la anterior. La saturación también se reduce un poco en las superficies más claras. Intenta poner todas tus superficies al 10% de saturación. ¿Te gusta más o menos?

Tema claro

Con un conjunto saludable de colores de texto y de superficie que especifican el tema oscuro, es hora de adaptarse a una preferencia de tema claro actualizando las propiedades personalizadas de color dentro de una consulta de medios prefers-color-scheme.

Usarás la misma técnica de mantener una gran diferencia en los valores de luminosidad entre las superficies y los colores del texto para que los colores contrasten bien.

Marca

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

En primer lugar, está el color de la marca. Necesita que se restablezca la saturación a su máxima potencia.

Texto

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

De manera similar a como el tema oscuro tenía colores de texto azul muy claro, en el tema claro los colores de texto son azul muy oscuro. Ver 10% y 30% como los valores de luminosidad para el color HSL debería indicarte que estos colores son oscuros.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Estos colores de superficie son los primeros en romper los patrones. Lo que hasta ahora parecía bastante razonable y lineal ahora está roto. Lo bueno es que puedes jugar con las combinaciones de colores del tema claro de HSL aquí mismo en el código y ajustar la luminosidad y la saturación para crear un esquema de colores claros agradable que no sea demasiado frío ni azul.

Usa el sistema de colores

Ahora que se definieron los colores, es hora de usarlos. Tienes un color de marca de acento llamativo, dos colores de texto y cuatro colores de superficie.

• Para las siguientes secciones de código, busca el selector correspondiente y agrega el CSS de color al bloque de código existente.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Los colores primarios de la página son los primeros colores de superficie y de texto que creaste, lo que también establece la cantidad predeterminada de contraste en su máximo. Ya puedes comenzar a probar el cambio entre los temas claro y oscuro.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Este es el elemento similar a una tarjeta de tu diseño. El borde de 1 píxel y el espacio de 1 píxel son del mismo color y representan la superficie detrás de cada .fieldset-item. Esto crea una buena armonía visual y es fácil de mantener.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Cada entrada de formulario está en su propia superficie. Espero que estés viendo cómo se unen estos elementos y cómo se superponen las variaciones de luminosidad.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Esta es una elección de estilo para mostrar la forma circular que rodea el ícono. El motivo se vuelve evidente cuando agregas interacciones en la siguiente sección.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Los íconos del formulario están configurados para usar el texto alternativo --text2. Los diseños en los que los íconos con relleno son un poco más claros que el texto evitan que se sientan demasiado pesados.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Este selector coincide con el elemento contenedor de entrada cuando se interactúa con una de las entradas que contiene y se orienta al SVG para destacarlo con el color de tu marca. Esto proporciona los comentarios de UX agradables del formulario, en el que la interacción con las entradas destaca su iconografía relevante.

<small>

small {
  color: var(--text2);
}

Es texto pequeño. Debe ser un poco más tenue que los encabezados y los párrafos (contenido principal).

Controles de formulario oscuros

:root {
  color-scheme: dark light;
}

Este toque final agradable le indica al navegador que esta página admite temas oscuros y claros. El navegador nos recompensa con controles de formulario oscuros.

6. Animación adaptable

Rama de Git: animations

Al final de esta sección, la página de configuración hará lo siguiente:

• Adaptarse a las preferencias de movimiento del usuario
• Responder a la interacción del usuario

Movimiento reducido frente a sin movimiento

La preferencia del usuario que se encuentra en el sistema operativo para el movimiento no ofrece un valor de sin animación. La opción es reducir el movimiento. Las animaciones de fundido cruzado, las transiciones de color y mucho más siguen siendo deseables para los usuarios que prefieren el movimiento reducido.

En esta página de configuración, no hay mucho movimiento en la pantalla. El movimiento es más bien un efecto de escala, como si el elemento se estuviera moviendo hacia el usuario. Es tan sencillo ajustar tu código CSS para que se adapte al movimiento reducido que disminuyes las transiciones de escalamiento.

Estilos de interacción

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Cuando un usuario interactúa con las entradas de uno de los elementos con aspecto de tarjeta de <fieldset>, se agrega un efecto de elevación. La interfaz empuja un elemento hacia adelante, lo que ayuda al usuario a enfocarse a medida que el grupo de formularios contextuales se acerca al usuario.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Cuando el usuario interactúa con una entrada, el fondo de la capa del elemento específico cambia a un color de superficie destacado, otra función de interfaz de apoyo para ayudar a atraer la atención del usuario y señalar que se está recibiendo la entrada. En la mayoría de los casos, no es necesario reducir las transiciones de color.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Aquí tienes una animación de clip-path que solo usas si el usuario no tiene preferencias en lo que respecta al movimiento reducido. El primer selector y los estilos restringen la ruta de recorte del círculo en un 10% y establecen algunos parámetros de transición. El segundo selector y estilo espera a que los usuarios interactúen con una entrada y, luego, aumenta el tamaño del círculo del ícono. Un efecto sutil, pero agradable cuando está bien.

7. Felicitaciones

Rama de Git: complete

¡Felicitaciones! Creaste correctamente una interfaz adaptable para el usuario.

Ahora conoces los pasos clave que se requieren para crear interfaces que se adapten a varios parámetros de configuración y situaciones de los usuarios.