Modo de color según la hora del día

Código

Copiar el marcado

import "@luz-ds/catalog/components/theme-time.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/theme-time.min.css" integrity="sha384-/WCzE4qOwaMLwa1OiKNhEtfjsdMiAEvBH1CD0NyQC54KfWSvfCtlVtGxG9Womi9X" crossorigin="anonymous">

Envuelve el <luz-theme-mode> de core en <luz-theme-time> y añade detrás los momentos del día, un botón de opción cada uno, en el orden del día. Su value es el nombre del momento; su etiqueta es lo que lee quien visita la página.

<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js"></script>

<luz-theme-time>
  <luz-theme-mode>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
  <fieldset class="luz-theme-time__moments">
    <legend class="luz-theme-time__legend">Time of day</legend>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dawn" data-from="05:00" data-theme="dark">Dawn</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="morning" data-from="07:30" data-theme="light">Morning</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="afternoon" data-from="12:00" data-theme="light" data-default>Afternoon</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="sunset" data-from="17:30" data-theme="light">Sunset</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dusk" data-from="20:30" data-theme="dark">Dusk</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="night" data-from="22:30" data-theme="dark" data-default>Night</label>
  </fieldset>
</luz-theme-time>

catalog.min.js carga theme-time.min.js cuando el navegador está inactivo y la página tiene el elemento. Para cargarlo por su cuenta, importa @luz-ds/catalog/theme-time y enlaza components/theme-time.css después del de core.

Variantes y opciones

Una barra con un lugar y los textos que necesita:

<luz-theme-time variant="bar" show="time place saved" place="Madrid" latitude="40.42" longitude="-3.7"
                 data-luz-label-scrub="Hour of the day" data-luz-label-saved="Saved">
  <luz-theme-mode inline>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
</luz-theme-time>

Propiedades, métodos y evento

Un método devuelve false cuando no hace nada: no hay momentos, o la hora está fuera de 0 a 24.

Cómo funciona

theme-time.js añade a <luz-theme-mode> los momentos del día, como una elección de quien lee. Core hace el resto, y el botón solo si el catálogo no carga.

• Automático es el del sistema, como en core: oscuro, alto contraste o claro. El reloj no mueve nada. data-moment toma el momento por defecto de ese modo (data-default) y no se marca ningún botón de opción de momento. El botón de opción de modo marcado es el que está en uso, Claro u Oscuro, y el botón lleva su nombre; no se guarda nada, y la elección sigue siendo Automático. Automático solo se marca mientras hay una hora o un momento elegido. Automático no sigue la hora: la página que quiere un momento lo fija, con el deslizador, una opción de momento o pin(hour).
• Un momento elegido es el último que ha empezado a esa hora (la noche pasa por la medianoche): su nombre va a data-moment, se marca su botón de opción y la página toma su base. Nunca se pide la ubicación.
• Un modo elegido muestra su momento por defecto. El alto contraste siempre gana: data-theme es high-contrast, así que una regla para "light" o "dark" no coincide.
• Con un lugar, latitude y longitude dan el amanecer y el atardecer reales de hoy, calculados en la página sin red, en lugar de los dos cambios del día; si el sol no sale o no se pone allí, valen las horas declaradas.
• Una hora fijada es el momento de esa hora conservado en Automático, guardado en luz-light con precisión de cinco minutos; elegir un modo, o Automático, en <luz-theme-mode> la suelta y vuelve al sistema.
• El deslizador (variant="bar"): al arrastrar se previsualiza la hora; al soltar se fija, se guarda y se escribe la nota «Guardado». Su pista se pinta con --luz-theme-time-sky-<value>, una por momento: Pintar la pista.
• Dos archivos: theme-time.min.js y theme-time-bar.min.js, que solo carga variant="bar". Para una barra añadida después del análisis, importa @luz-ds/catalog/theme-time-bar y llama a initThemeTimeBar(root).

Sin JavaScript

No hay barra y los momentos no se muestran. Los botones de opción de core siguen cambiando el modo; Automático sigue al sistema y no se escribe data-moment.

Teclado y ARIA

• Deslizador: un rango nativo en pasos de 5 minutos: se llega con Tab, las flechas mueven un paso, Inicio va a las 00:00 y Fin a las 23:55. Cada pulsación previsualiza la hora.
• Escape en el deslizador suelta una hora fijada y entonces no cierra un diálogo que rodee la barra.
• Nombre y valor: el nombre es data-luz-label-scrub; aria-valuetext es el momento y la hora, «Tarde, 13:00». Cuando hay una hora fijada, una región role="status" dice tu data-luz-label-saved, se vea o no.
• Los momentos como opciones (show="moments") son botones de opción en un fieldset: las flechas eligen uno. El botón de modo es el de core: su teclado y ARIA. Con el sistema en uso, avanza desde el modo mostrado, de modo que la primera pulsación nunca lo repite.

Script para la cabecera

Opcional, después del de core. Escribe el momento antes del primer pintado. Copia node_modules/@luz-ds/catalog/dist/theme-time-boot.min.js a tu propio origen. Los momentos viajan en su etiqueta, como data-moments: el cuerpo aún no se ha leído.

<head>
  <script src="/theme-boot.min.js"></script>
  <script src="/theme-time-boot.min.js"
          data-moments="dawn@05:00=dark morning@07:30=light afternoon@12:00=light* sunset@17:30=light dusk@20:30=dark night@22:30=dark*"></script>
  <link rel="stylesheet" href="…">
</head>

• data-moments: value@HH:MM=base por cada momento, en el orden del marcado; * marca data-default.
• Qué escribe: data-moment en <html> y, con una hora fijada (luz-light), data-mode (y data-theme, sin marca) con la base de ese momento. Un modo guardado, o Automático sin hora fijada, muestra el momento por defecto de su modo; prefers-contrast: more gana. Nunca escribe en el almacenamiento. Bloquea el renderizado como el de core, bajo la misma excepción (EX-012).

Los seis momentos de ejemplo

Según el reloj de quien visita la página, como los declaran el marcado de arriba y el pie de este sitio. La noche pasa por la medianoche, y data-moment en <html> toma el nombre.

Pintar cada momento

Los colores son tuyos: define solo los tokens que cambian, sobre la base que nombra el momento, como hace un tema propio, y mide cada par con la comprobación de contraste. Escribe siempre la base junto al momento: una regla con [data-moment] sola también coincide con el alto contraste y rompe su contraste.

/* Painted over the base the moment names: only the tokens that differ */
:root[data-theme="light"][data-moment="morning"] {
  --luz-surface-page: #fdf3dc;
  --luz-surface: #fffaf0;
}

:root[data-theme="dark"][data-moment="dawn"] {
  --luz-surface-page: #0f1520;
  --luz-surface: #172030;
}

/* With a brand of your own: */
:root[data-theme="my-brand"][data-mode="light"][data-moment="morning"] { … }

Pintar la pista

Define una propiedad por momento, una vez, en :root:

:root {
  --luz-theme-time-sky-night: #171b36;
  --luz-theme-time-sky-dawn: #6b3f5f;
  --luz-theme-time-sky-afternoon: #cfe1f6;
}

• Sin ellas, la barra recibe una rampa neutra de tokens. Lee qué propiedades están definidas cuando se construye; los colores siguen siendo variables, así que un modo que los cambie repinta la pista.
• Alto contraste: bajo :root[data-theme="high-contrast"] define cada momento como var(--luz-text-primary): un único relleno sólido que conserva su contraste. Con colores forzados la pista es CanvasText. De derecha a izquierda, el día corre desde la derecha.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Úsalo cuando el sitio tiene un aspecto para cada momento del día, o cuando la gente debe poder probar la luz a otra hora.

• Solo los momentos, en un pie de página o una barra de navegación, para un sitio que cambia su aspecto a lo largo del día.
• La barra, donde la luz forma parte de la página, como una página de inicio.

Cuándo no usarlo

No lo uses cuando el sitio tiene un solo aspecto en un modo: basta con el modo de color de core.

• No prometas el amanecer real sin un lugar: las horas declaradas son fijas.
• No uses la barra como único control: conserva el botón de core.
• No pidas la ubicación de quien visita la página: escribe tú el lugar.

Qué hacer y qué no

Cómo escribir el contenido

Llama a los momentos por la luz que muestran: «Amanecer», «Mañana», «Tarde», «Atardecer», «Anochecer» y «Noche».

• Las etiquetas están en el idioma de la página: el deslizador las lee junto con la hora.
• Da al deslizador un nombre que diga lo que hace, «Hora del día», y a la nota «Guardado».
• Di cerca del control qué sigue Automático: «Automático sigue a tu sistema», y que un momento es una elección.

Contraste y foco

La barra lee los tokens semánticos de la página. Los colores que des a cada momento los mides tú, en claro y en oscuro.

Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: un contorno de 2 px, a 2 px del deslizador o del momento, con --luz-focus-ring.
• La pista sobre la página: el anillo usa --luz-text-secondary sobre --luz-surface-page, el par de la tabla. Leído en los píxeles del tramo más débil de la pista, que es un degradado con un borde suave que la tabla no puede medir, quien lo implementó obtuvo 3.48:1 en claro, 4.63:1 en oscuro y 21:1 en alto contraste.
• No solo color: la pista tiene un anillo suave con --luz-text-secondary alrededor de su degradado, la hora está escrita como texto y de noche el mando es una media luna. Con colores forzados la pista es CanvasText con un contorno de 1 px del mismo color, y el momento seleccionado usa el color de resaltado del sistema.
• Área interactiva: el deslizador mide 2,75rem de alto sobre una pista de 6 px: el área interactiva es el deslizador y la pista solo dibuja.
• Movimiento: la nota aparece y desaparece con un desvanecimiento; no hay otro movimiento.
• Impresión: el elemento no se imprime.

Tokens que usa

Los 22 tokens que lee components/theme-time.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. El botón es el de core: sus tokens están en Modo del tema. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-fill, --luz-brand-primary, --luz-color-success, --luz-focus-ring, --luz-outline, --luz-sidebar-active-bg, --luz-sidebar-bg, --luz-surface, --luz-surface-hover, --luz-surface-page, --luz-text-on-fill, --luz-text-primary, --luz-text-secondary

Espaciado y tamaños

--luz-space-2xs, --luz-space-3xs, --luz-space-md, --luz-space-sm

Tipografía

--luz-text-3xl, --luz-text-sm

Radio

--luz-radius-full

Movimiento

--luz-duration-fast, --luz-duration-slow

El teclado y ARIA están en la pestaña Código.