logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza:
clase:daw:diw:sistema-diseno-tokens

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
clase:daw:diw:sistema-diseno-tokens [2026/10/23 23:36] – Botón: separar tokens de diseño (públicas) y estado (privadas, --boton-privateState-*) claudeclase:daw:diw:sistema-diseno-tokens [2026/10/24 01:11] (actual) – Ejercicios 1 y 2 nuevos: paddings y márgenes calculados con @for y oscurecimiento al pulsar el botón claude
Línea 2: Línea 2:
 En el tema de BEM los componentes tenían los valores puestos directamente. En este tema vamos a hacer bien un componente usando **tokens**, que es lo mismo que hace Angular Material pero hecho por nosotros: En el tema de BEM los componentes tenían los valores puestos directamente. En este tema vamos a hacer bien un componente usando **tokens**, que es lo mismo que hace Angular Material pero hecho por nosotros:
   * **Tokens de sistema**: Variables CSS globales que usan todos los componentes. En nuestro sistema empiezan por ''--mlt-sys-'' (como ''--mat-sys-'' en Angular Material).   * **Tokens de sistema**: Variables CSS globales que usan todos los componentes. En nuestro sistema empiezan por ''--mlt-sys-'' (como ''--mat-sys-'' en Angular Material).
-  * **Tokens de diseño**: Variables CSS públicas de cada componente, por ejemplo ''--boton-color-strong'' (como ''--mat-button-filled-container-color'' en Angular Material). Su valor por defecto es un token de sistema.+  * **Tokens de diseño**: Variables CSS públicas de cada componente, por ejemplo ''--boton-color-peligrosa'' (como ''--mat-button-filled-container-color'' en Angular Material). Su valor por defecto es un token de sistema.
  
-Además, cada componente tiene **variables privadas** que no son tokens: son CSS que necesita el componente para funcionar y que no le interesan al diseñador.+Además, cada componente tiene un **estado privado**: variables que no son tokens sino CSS que necesita el componente para funcionar y que no le interesan al diseñador.
  
 ===== Números mágicos ===== ===== Números mágicos =====
Línea 187: Línea 187:
   --mlt-sys-width-10: 36px;   --mlt-sys-width-10: 36px;
   --mlt-sys-width-11: 40px;   --mlt-sys-width-11: 40px;
 +
 +  --mlt-sys-oscurecimiento-0: 0%;
 +  --mlt-sys-oscurecimiento-1: 5%;
 +  --mlt-sys-oscurecimiento-2: 10%;
 +  --mlt-sys-oscurecimiento-3: 15%;
 +  --mlt-sys-oscurecimiento-4: 20%;
 +  --mlt-sys-oscurecimiento-5: 25%;
 +  --mlt-sys-oscurecimiento-6: 30%;
 } }
 </sxh> </sxh>
Línea 225: Línea 233:
 Pero aun se tiene que mejorar la legibilidad del código. En vez de usar directamente los tokens de sistema, el botón crea sus propias variables: Pero aun se tiene que mejorar la legibilidad del código. En vez de usar directamente los tokens de sistema, el botón crea sus propias variables:
  
-<sxh css; highlight: [2-15]>+<sxh css; highlight: [2-19]>
 .c-boton { .c-boton {
-  /* Parte pública: tokens de diseño */ +  /* Tokens de diseño: decisiones del diseñador, un valor cada uno */ 
-  --boton-color-strong: var(--mlt-sys-color-principal-5); +  --boton-color-normal: var(--mlt-sys-color-principal-5); 
-  --boton-color-weak: var(--mlt-sys-color-blanco-9);+  --boton-color-alternativa: var(--mlt-sys-color-alternativo-5); 
 +  --boton-color-peligrosa: var(--mlt-sys-color-rojo-5); 
 +  --boton-color-texto-primaria: var(--mlt-sys-color-blanco-9); 
   --boton-font-family: var(--mlt-sys-font-default);   --boton-font-family: var(--mlt-sys-font-default);
   --boton-font-size: var(--mlt-sys-font-size-4);   --boton-font-size: var(--mlt-sys-font-size-4);
Línea 236: Línea 247:
   --boton-border-radius: var(--mlt-sys-border-radius-4);   --boton-border-radius: var(--mlt-sys-border-radius-4);
  
-  /* Parte privada: estado del botón */ 
-  --boton-privateState-background-color: var(--boton-color-strong); 
-  --boton-privateState-border-color: var(--boton-color-strong); 
-  --boton-privateState-text-color: var(--boton-color-weak); 
  
-  /* Propiedades CSS: solo usan variables del botón */+  /* Estado privado: por defecto, normal y primaria */ 
 +  --boton-privateState-color: var(--boton-color-normal); 
 +  --boton-privateState-background-color: var(--boton-privateState-color); 
 +  --boton-privateState-border-color: var(--boton-privateState-color); 
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria); 
 + 
 +  /* Propiedades CSS: solo usan el estado y los tokens */
   font-family: var(--boton-font-family);   font-family: var(--boton-font-family);
   font-size: var(--boton-font-size);   font-size: var(--boton-font-size);
Línea 259: Línea 272:
 } }
  
-/* La función cambia un token de diseño: el color del botón */+/* La función elige qué token de color se usa */
 .c-boton--funcion-normal { .c-boton--funcion-normal {
-  --boton-color-strong: var(--mlt-sys-color-principal-5);+  --boton-privateState-color: var(--boton-color-normal);
 } }
 .c-boton--funcion-alternativa { .c-boton--funcion-alternativa {
-  --boton-color-strong: var(--mlt-sys-color-alternativo-5);+  --boton-privateState-color: var(--boton-color-alternativa);
 } }
 .c-boton--funcion-peligrosa { .c-boton--funcion-peligrosa {
-  --boton-color-strong: var(--mlt-sys-color-rojo-5);+  --boton-privateState-color: var(--boton-color-peligrosa);
 } }
  
-/* La importancia cambia el estado: qué color va en el fondo, el borde y el texto */+/* La importancia decide dónde va el color: fondo, borde o texto */
 .c-boton--importancia-primaria { .c-boton--importancia-primaria {
-  --boton-privateState-background-color: var(--boton-color-strong); +  --boton-privateState-background-color: var(--boton-privateState-color); 
-  --boton-privateState-border-color: var(--boton-color-strong); +  --boton-privateState-border-color: var(--boton-privateState-color); 
-  --boton-privateState-text-color: var(--boton-color-weak);+  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 } }
 .c-boton--importancia-secundaria { .c-boton--importancia-secundaria {
-  --boton-privateState-background-color: var(--boton-color-weak); +  --boton-privateState-background-color: transparent; 
-  --boton-privateState-border-color: var(--boton-color-strong); +  --boton-privateState-border-color: var(--boton-privateState-color); 
-  --boton-privateState-text-color: var(--boton-color-strong);+  --boton-privateState-text-color: var(--boton-privateState-color);
 } }
 .c-boton--importancia-terciaria { .c-boton--importancia-terciaria {
-  --boton-privateState-background-color: var(--boton-color-weak); +  --boton-privateState-background-color: transparent; 
-  --boton-privateState-border-color: var(--boton-color-weak); +  --boton-privateState-border-color: transparent; 
-  --boton-privateState-text-color: var(--boton-color-strong);+  --boton-privateState-text-color: var(--boton-privateState-color);
 } }
 </sxh> </sxh>
Línea 293: Línea 306:
  
 Dentro del botón hay dos tipos de variables: Dentro del botón hay dos tipos de variables:
-  * **Públicas** (''--boton-*''): Son los **tokens de diseño** del componente. Las decide el diseñador: el color del botón, la fuente, el tamaño, el redondeo... Su valor por defecto siempre es un token de sistema y se pueden cambiar desde fuera del componente. +  * **Tokens de diseño** (''--boton-*''): Son las decisiones del diseñador: de qué color es el botón normal, el alternativo y el peligroso, el color del texto en la primaria, la fuente, el tamaño, el redondeo... Cada token tiene **un único valor**, que por defecto es un token de sistema. 
-    * ''--boton-color-strong'': El color del botón. Lo cambian los modificadores de función (normal, alternativa y peligrosa). +  * **Estado privado** (''--boton-privateState-*''): Guarda cómo está el botón ahora mismo: qué color le toca y qué color va en el fondo, el borde y el texto. No son tokens sino algo informático: el CSS que hace falta para implementar el botón y que al diseñador no le interesa.
-    * ''--boton-color-weak'': El otro color del botón, el blanco. +
-  * **Privadas** (''--boton-privateState-*''): Guardan el **estado actual** del botón: de qué color son ahora el fondo, el borde y el texto. No son tokens de diseño sino algo informático, el CSS que hace falta para implementar el botón. Las cambian los modificadores de importancia (primaria, secundaria y terciaria) a partir de ''--boton-color-strong'' y ''--boton-color-weak''.+
  
-Al diseñador le interesa que el botón sea rojo y secundario; cómo se consigue eso con el fondo, el borde y el texto es cosa del programador. Por ejemplo, en la terciaria el borde se pone del mismo color que el fondo para que no se vea pero el botón no cambie de tamaño: eso es un truco de CSS, no una decisión de diseño.+Para saber si una variable es un token o es estado: si su valor depende del modificador que lleve el botón, es estado. ''--boton-color-peligrosa'' vale siempre rojo; ''--boton-privateState-color'' vale el color que le toque según su función.
  
-^ ^ Pública ^ Privada ^ +Por eso **los modificadores solo cambian el estado, nunca los tokens**: 
-^ Qué es | Token de diseño | Estado del componente | +  * **Función**: Elige qué token de color se usa. ''c-boton--funcion-peligrosa'' pone en ''--boton-privateState-color'' el token ''--boton-color-peligrosa''. 
-^ Nombre | ''--boton-*'' | ''--boton-privateState-*'' | +  * **Importancia**: Decide dónde va ese color: en la primaria el fondo y el borde, en la secundaria el borde y el texto, y en la terciaria solo el texto. La secundaria y la terciaria tienen el fondo ''transparent'', así que quedan bien sobre cualquier fondo. En la terciaria el borde también es ''transparent'': está para que el botón no cambie de tamaño, pero no se ve. Eso es un truco de CSS, no una decisión de diseño.
-^ Quién la cambia | El diseñador, el que usa el componente y los modificadores | Solo los modificadores del propio componente | +
-^ Ejemplo | ''--boton-color-strong'' | ''--boton-privateState-background-color'' |+
  
-Las propiedades CSS solo usan variables del botón. Así se puede cambiar cómo está hecho el botón (sus variables privadas y sus propiedades) sin que cambie su parte pública.+''transparent'' no es un token: es una palabra clave de CSS y no hay nada que el diseñador pueda elegir. 
 + 
 +^ ^ Token de diseño ^ Estado privado ^ 
 +^ Qué guarda | Una decisión del diseñador | Cómo está el botón ahora | 
 +^ Nombre | ''--boton-*'' | ''--boton-privateState-*'' | 
 +^ Su valor | Uno solo, por defecto un token de sistema | Depende de los modificadores | 
 +^ Quién lo cambia | El diseñador o quien personaliza el botón | Solo los modificadores del botón | 
 +^ Ejemplo | ''--boton-color-peligrosa'' | ''--boton-privateState-background-color'' |
  
 <note important> <note important>
-Nunca cambies una variable ''privateState'' desde fuera del componente. Si para que un botón secundario sea verde redefines ''--boton-privateState-background-color'', pintas de verde el fondo que debía ser blanco y el borde y el texto se quedan con el color anterior. Para cambiar el color se cambia el token: ''--boton-color-strong''.+Para que los botones peligrosos sean de otro rojo se cambia el token ''--boton-color-peligrosa'', nunca el estado. Si en un botón secundario redefines ''--boton-privateState-background-color'', pintas de rojo el fondo que debía ser transparente y el borde y el texto se quedan como estaban.
 </note> </note>
  
 <note> <note>
 Los nombres de las variables CSS distinguen mayúsculas de minúsculas: ''--boton-privatestate-text-color'' es otra variable y el botón no funcionaría. Los nombres de las variables CSS distinguen mayúsculas de minúsculas: ''--boton-privatestate-text-color'' es otra variable y el botón no funcionaría.
 +</note>
 +
 +===== Añadiendo el tamaño =====
 +Ahora necesitamos botones de tres tamaños, con los modificadores ''c-boton--size-s'', ''c-boton--size-m'' y ''c-boton--size-l''. El tamaño cambia el ''font-size'' y el ''padding'', así que el botón crece: más tokens de diseño, más estado privado y un modificador nuevo. Lo nuevo está resaltado:
 +
 +<sxh css; highlight: [9-14, 19, 24-25, 29-30, 73-85]>
 +.c-boton {
 +  /* Tokens de diseño: decisiones del diseñador, un valor cada uno */
 +  --boton-color-normal: var(--mlt-sys-color-principal-5);
 +  --boton-color-alternativa: var(--mlt-sys-color-alternativo-5);
 +  --boton-color-peligrosa: var(--mlt-sys-color-rojo-5);
 +  --boton-color-texto-primaria: var(--mlt-sys-color-blanco-9);
 +
 +  --boton-font-family: var(--mlt-sys-font-default);
 +  --boton-font-size-s: var(--mlt-sys-font-size-3);
 +  --boton-font-size-m: var(--mlt-sys-font-size-4);
 +  --boton-font-size-l: var(--mlt-sys-font-size-6);
 +  --boton-padding-s: var(--mlt-sys-padding-2);
 +  --boton-padding-m: var(--mlt-sys-padding-3);
 +  --boton-padding-l: var(--mlt-sys-padding-4);
 +  --boton-border-width: var(--mlt-sys-width-1);
 +  --boton-border-radius: var(--mlt-sys-border-radius-4);
 +
 +
 +  /* Estado privado: por defecto, normal, primaria y tamaño m */
 +  --boton-privateState-color: var(--boton-color-normal);
 +  --boton-privateState-background-color: var(--boton-privateState-color);
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding: var(--boton-padding-m);
 +
 +  /* Propiedades CSS: solo usan el estado y los tokens */
 +  font-family: var(--boton-font-family);
 +  font-size: var(--boton-privateState-font-size);
 +  padding: var(--boton-privateState-padding);
 +
 +  border-radius: var(--boton-border-radius);
 +  border-width: var(--boton-border-width);
 +  border-style: solid;
 +
 +  display: inline-block;
 +  cursor: pointer;
 +  text-decoration: none;
 +
 +  border-color: var(--boton-privateState-border-color);
 +  background-color: var(--boton-privateState-background-color);
 +  color: var(--boton-privateState-text-color);
 +}
 +
 +/* La función elige qué token de color se usa */
 +.c-boton--funcion-normal {
 +  --boton-privateState-color: var(--boton-color-normal);
 +}
 +.c-boton--funcion-alternativa {
 +  --boton-privateState-color: var(--boton-color-alternativa);
 +}
 +.c-boton--funcion-peligrosa {
 +  --boton-privateState-color: var(--boton-color-peligrosa);
 +}
 +
 +/* La importancia decide dónde va el color: fondo, borde o texto */
 +.c-boton--importancia-primaria {
 +  --boton-privateState-background-color: var(--boton-privateState-color);
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +}
 +.c-boton--importancia-secundaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-privateState-color);
 +}
 +.c-boton--importancia-terciaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: transparent;
 +  --boton-privateState-text-color: var(--boton-privateState-color);
 +}
 +
 +/* El tamaño elige qué tokens de font-size y padding se usan */
 +.c-boton--size-s {
 +  --boton-privateState-font-size: var(--boton-font-size-s);
 +  --boton-privateState-padding: var(--boton-padding-s);
 +}
 +.c-boton--size-m {
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding: var(--boton-padding-m);
 +}
 +.c-boton--size-l {
 +  --boton-privateState-font-size: var(--boton-font-size-l);
 +  --boton-privateState-padding: var(--boton-padding-l);
 +}
 +</sxh>
 +
 +<sxh html>
 +<button class="c-boton c-boton--funcion-peligrosa c-boton--importancia-secundaria c-boton--size-s">Borrar</button>
 +<button class="c-boton c-boton--size-m">Guardar</button>
 +<button class="c-boton c-boton--funcion-alternativa c-boton--size-l">Comprar</button>
 +</sxh>
 +
 +Lo que ha cambiado:
 +  * **Tokens de diseño**: ''--boton-font-size'' y ''--boton-padding'' pasan a ser un token por tamaño (''--boton-font-size-s'', ''-m'', ''-l'' y lo mismo con el padding). Un token tiene un único valor, así que si hay tres tamaños hay tres tokens.
 +  * **Estado privado**: ''--boton-privateState-font-size'' y ''--boton-privateState-padding'' guardan el tamaño que le toca al botón ahora. Por defecto es el ''m'', así que un botón sin modificador de tamaño sigue igual que antes.
 +  * **Propiedades CSS**: ''font-size'' y ''padding'' ya no usan el token directamente sino el estado.
 +  * **Modificador ''--size-*''**: Como los de función e importancia, solo cambia el estado: elige qué tokens de ''font-size'' y ''padding'' se usan.
 +
 +El tamaño no toca las variables de la función ni de la importancia, por eso se combina con ellas sin problemas: un botón puede ser peligroso, secundario y pequeño a la vez. Cada nuevo modificador es un grupo más de estado privado.
 +
 +<note important>
 +Si en ''.c-boton--size-l'' pones directamente ''font-size: var(--boton-font-size-l)'', funciona, pero el botón ya no sigue la regla de que las propiedades CSS solo usan el estado y los tokens. Los modificadores **siempre** cambian el estado, nunca las propiedades CSS.
 +</note>
 +
 +===== Padding vertical y horizontal =====
 +El último extra: el padding vertical y el horizontal no tienen por qué ser iguales. Un botón queda mejor con más padding a los lados que arriba y abajo, así que cada tamaño necesita dos paddings. Otra vez el botón crece: más tokens de diseño y más estado privado, pero ningún modificador nuevo. Lo nuevo está resaltado:
 +
 +<sxh css; highlight: [12-17, 28-29, 34, 80-81, 85-86, 90-91]>
 +.c-boton {
 +  /* Tokens de diseño: decisiones del diseñador, un valor cada uno */
 +  --boton-color-normal: var(--mlt-sys-color-principal-5);
 +  --boton-color-alternativa: var(--mlt-sys-color-alternativo-5);
 +  --boton-color-peligrosa: var(--mlt-sys-color-rojo-5);
 +  --boton-color-texto-primaria: var(--mlt-sys-color-blanco-9);
 +
 +  --boton-font-family: var(--mlt-sys-font-default);
 +  --boton-font-size-s: var(--mlt-sys-font-size-3);
 +  --boton-font-size-m: var(--mlt-sys-font-size-4);
 +  --boton-font-size-l: var(--mlt-sys-font-size-6);
 +  --boton-padding-vertical-s: var(--mlt-sys-padding-1);
 +  --boton-padding-vertical-m: var(--mlt-sys-padding-2);
 +  --boton-padding-vertical-l: var(--mlt-sys-padding-3);
 +  --boton-padding-horizontal-s: var(--mlt-sys-padding-3);
 +  --boton-padding-horizontal-m: var(--mlt-sys-padding-4);
 +  --boton-padding-horizontal-l: var(--mlt-sys-padding-6);
 +  --boton-border-width: var(--mlt-sys-width-1);
 +  --boton-border-radius: var(--mlt-sys-border-radius-4);
 +
 +
 +  /* Estado privado: por defecto, normal, primaria y tamaño m */
 +  --boton-privateState-color: var(--boton-color-normal);
 +  --boton-privateState-background-color: var(--boton-privateState-color);
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-m);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m);
 +
 +  /* Propiedades CSS: solo usan el estado y los tokens */
 +  font-family: var(--boton-font-family);
 +  font-size: var(--boton-privateState-font-size);
 +  padding: var(--boton-privateState-padding-vertical) var(--boton-privateState-padding-horizontal);
 +
 +  border-radius: var(--boton-border-radius);
 +  border-width: var(--boton-border-width);
 +  border-style: solid;
 +
 +  display: inline-block;
 +  cursor: pointer;
 +  text-decoration: none;
 +
 +  border-color: var(--boton-privateState-border-color);
 +  background-color: var(--boton-privateState-background-color);
 +  color: var(--boton-privateState-text-color);
 +}
 +
 +/* La función elige qué token de color se usa */
 +.c-boton--funcion-normal {
 +  --boton-privateState-color: var(--boton-color-normal);
 +}
 +.c-boton--funcion-alternativa {
 +  --boton-privateState-color: var(--boton-color-alternativa);
 +}
 +.c-boton--funcion-peligrosa {
 +  --boton-privateState-color: var(--boton-color-peligrosa);
 +}
 +
 +/* La importancia decide dónde va el color: fondo, borde o texto */
 +.c-boton--importancia-primaria {
 +  --boton-privateState-background-color: var(--boton-privateState-color);
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +}
 +.c-boton--importancia-secundaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: var(--boton-privateState-color);
 +  --boton-privateState-text-color: var(--boton-privateState-color);
 +}
 +.c-boton--importancia-terciaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: transparent;
 +  --boton-privateState-text-color: var(--boton-privateState-color);
 +}
 +
 +/* El tamaño elige qué tokens de font-size y padding se usan */
 +.c-boton--size-s {
 +  --boton-privateState-font-size: var(--boton-font-size-s);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-s);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-s);
 +}
 +.c-boton--size-m {
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-m);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m);
 +}
 +.c-boton--size-l {
 +  --boton-privateState-font-size: var(--boton-font-size-l);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-l);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-l);
 +}
 +</sxh>
 +
 +Lo que ha cambiado:
 +  * **Tokens de diseño**: Cada ''--boton-padding-*'' se parte en dos, ''--boton-padding-vertical-*'' y ''--boton-padding-horizontal-*''. Con tres tamaños son seis tokens.
 +  * **Estado privado**: ''--boton-privateState-padding'' se parte también en ''--boton-privateState-padding-vertical'' y ''--boton-privateState-padding-horizontal''.
 +  * **Propiedades CSS**: ''padding'' recibe los dos valores: el primero es el vertical y el segundo el horizontal.
 +  * **Modificadores ''--size-*''**: Siguen siendo los mismos, solo que ahora ponen dos variables de padding en vez de una.
 +
 +El HTML no cambia: los botones se siguen usando igual que antes. Eso es lo bueno de separar tokens, estado y propiedades: el componente crece por dentro sin que se entere quien lo usa.
 +
 +===== Oscurecer al pasar el ratón =====
 +Ahora, al pasar el ratón por encima, el color del botón se tiene que oscurecer un poco. Para oscurecer un color se mezcla con negro usando ''color-mix()'':
 +
 +<sxh css>
 +color-mix(in oklab, var(--boton-privateState-color), black 15%)
 +</sxh>
 +
 +Esta vez no basta con añadir tokens de diseño y estado privado: también hacen falta **tokens de sistema nuevos**. Para el tamaño y el padding ya había valores en el sistema, pero no hay ningún oscurecimiento, y el ''15%'' puesto a mano sería un número mágico. Así que se añade al sistema una escala de oscurecimientos, igual que la de paddings, y cada componente elige de ella el que quiera en sus tokens de diseño, para el hover o para lo que necesite:
 +
 +<sxh css>
 +:root {
 +  --mlt-sys-oscurecimiento-0: 0%;
 +  --mlt-sys-oscurecimiento-1: 5%;
 +  --mlt-sys-oscurecimiento-2: 10%;
 +  --mlt-sys-oscurecimiento-3: 15%;
 +  --mlt-sys-oscurecimiento-4: 20%;
 +  --mlt-sys-oscurecimiento-5: 25%;
 +  --mlt-sys-oscurecimiento-6: 30%;
 +}
 +</sxh>
 +
 +En el botón hay que pensar qué es token y qué es estado:
 +  * **Token de diseño** ''--boton-hover-oscurecimiento'': Cuánto se oscurece. Es una decisión del diseñador y vale siempre lo mismo. Como todos los tokens de diseño, su valor por defecto es un token de sistema: ''--mlt-sys-oscurecimiento-3'' (15%).
 +  * **Estado privado** ''--boton-privateState-oscurecimiento'': Cuánto está oscurecido el botón ahora mismo: ''0%'' normalmente y el valor del token cuando el ratón está encima.
 +  * **Estado privado** ''--boton-privateState-color-final'': El color que se pinta de verdad, que es el color de la función mezclado con negro según el oscurecimiento. El fondo, el borde y el texto pasan a usar este en vez de ''--boton-privateState-color''.
 +  * **''<nowiki>:hover</nowiki>''**: Funciona como un modificador más que pone el navegador: solo cambia el estado.
 +
 +Lo nuevo está resaltado:
 +
 +<sxh css; highlight: [20, 23, 25-28, 65-66, 71-72, 77, 97-100]>
 +.c-boton {
 +  /* Tokens de diseño: decisiones del diseñador, un valor cada uno */
 +  --boton-color-normal: var(--mlt-sys-color-principal-5);
 +  --boton-color-alternativa: var(--mlt-sys-color-alternativo-5);
 +  --boton-color-peligrosa: var(--mlt-sys-color-rojo-5);
 +  --boton-color-texto-primaria: var(--mlt-sys-color-blanco-9);
 +
 +  --boton-font-family: var(--mlt-sys-font-default);
 +  --boton-font-size-s: var(--mlt-sys-font-size-3);
 +  --boton-font-size-m: var(--mlt-sys-font-size-4);
 +  --boton-font-size-l: var(--mlt-sys-font-size-6);
 +  --boton-padding-vertical-s: var(--mlt-sys-padding-1);
 +  --boton-padding-vertical-m: var(--mlt-sys-padding-2);
 +  --boton-padding-vertical-l: var(--mlt-sys-padding-3);
 +  --boton-padding-horizontal-s: var(--mlt-sys-padding-3);
 +  --boton-padding-horizontal-m: var(--mlt-sys-padding-4);
 +  --boton-padding-horizontal-l: var(--mlt-sys-padding-6);
 +  --boton-border-width: var(--mlt-sys-width-1);
 +  --boton-border-radius: var(--mlt-sys-border-radius-4);
 +  --boton-hover-oscurecimiento: var(--mlt-sys-oscurecimiento-3);
 +
 +
 +  /* Estado privado: por defecto, normal, primaria, tamaño m y sin hover */
 +  --boton-privateState-color: var(--boton-color-normal);
 +  --boton-privateState-oscurecimiento: 0%;
 +  --boton-privateState-color-final: color-mix(in oklab, var(--boton-privateState-color), black var(--boton-privateState-oscurecimiento));
 +  --boton-privateState-background-color: var(--boton-privateState-color-final);
 +  --boton-privateState-border-color: var(--boton-privateState-color-final);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-m);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m);
 +
 +  /* Propiedades CSS: solo usan el estado y los tokens */
 +  font-family: var(--boton-font-family);
 +  font-size: var(--boton-privateState-font-size);
 +  padding: var(--boton-privateState-padding-vertical) var(--boton-privateState-padding-horizontal);
 +
 +  border-radius: var(--boton-border-radius);
 +  border-width: var(--boton-border-width);
 +  border-style: solid;
 +
 +  display: inline-block;
 +  cursor: pointer;
 +  text-decoration: none;
 +
 +  border-color: var(--boton-privateState-border-color);
 +  background-color: var(--boton-privateState-background-color);
 +  color: var(--boton-privateState-text-color);
 +}
 +
 +/* La función elige qué token de color se usa */
 +.c-boton--funcion-normal {
 +  --boton-privateState-color: var(--boton-color-normal);
 +}
 +.c-boton--funcion-alternativa {
 +  --boton-privateState-color: var(--boton-color-alternativa);
 +}
 +.c-boton--funcion-peligrosa {
 +  --boton-privateState-color: var(--boton-color-peligrosa);
 +}
 +
 +/* La importancia decide dónde va el color: fondo, borde o texto */
 +.c-boton--importancia-primaria {
 +  --boton-privateState-background-color: var(--boton-privateState-color-final);
 +  --boton-privateState-border-color: var(--boton-privateState-color-final);
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria);
 +}
 +.c-boton--importancia-secundaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: var(--boton-privateState-color-final);
 +  --boton-privateState-text-color: var(--boton-privateState-color-final);
 +}
 +.c-boton--importancia-terciaria {
 +  --boton-privateState-background-color: transparent;
 +  --boton-privateState-border-color: transparent;
 +  --boton-privateState-text-color: var(--boton-privateState-color-final);
 +}
 +
 +/* El tamaño elige qué tokens de font-size y padding se usan */
 +.c-boton--size-s {
 +  --boton-privateState-font-size: var(--boton-font-size-s);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-s);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-s);
 +}
 +.c-boton--size-m {
 +  --boton-privateState-font-size: var(--boton-font-size-m);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-m);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m);
 +}
 +.c-boton--size-l {
 +  --boton-privateState-font-size: var(--boton-font-size-l);
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-l);
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-l);
 +}
 +
 +/* Al pasar el ratón, el color se oscurece */
 +.c-boton:hover {
 +  --boton-privateState-oscurecimiento: var(--boton-hover-oscurecimiento);
 +}
 +</sxh>
 +
 +El texto blanco de la primaria no se oscurece porque no usa el color final sino el token ''--boton-color-texto-primaria''. En la secundaria y la terciaria sí se oscurecen el texto y el borde, porque usan el color final.
 +
 +<note important>
 +Lo primero que se le ocurre a cualquiera es ''--boton-privateState-color: color-mix(in oklab, var(--boton-privateState-color), black 15%)'' dentro del ''<nowiki>:hover</nowiki>''. No funciona: una variable CSS no puede usarse a sí misma en su valor (es un ciclo) y el navegador la anula, así que el botón se queda sin color. Por eso hace falta la variable nueva ''--boton-privateState-color-final''.
 </note> </note>
  
Línea 321: Línea 690:
 ^ ^  Angular Material  ^  Nuestro sistema  ^ ^ ^  Angular Material  ^  Nuestro sistema  ^
 ^ Token de sistema | ''--mat-sys-primary'' | ''--mlt-sys-color-principal-5'' | ^ Token de sistema | ''--mat-sys-primary'' | ''--mlt-sys-color-principal-5'' |
-^ Token de diseño | ''--mat-button-filled-container-color'' | ''--boton-color-strong'' | +^ Token de diseño | ''--mat-button-filled-container-color'' | ''--boton-color-normal'' | 
-^ El token de diseño toma el valor de un token de sistema | ''var(--mat-button-filled-container-color, var(--mat-sys-primary))'' | ''--boton-color-strong: var(--mlt-sys-color-principal-5)'' | +^ El token de diseño toma el valor de un token de sistema | ''var(--mat-button-filled-container-color, var(--mat-sys-primary))'' | ''--boton-color-normal: var(--mlt-sys-color-principal-5)'' | 
-^ Cambiar un componente | mixin ''mat.button-overrides(...)'' | redefinir sus tokens de diseño ''--boton-*'' (nunca los ''privateState'') |+^ Cambiar un componente | mixin ''mat.button-overrides(...)'' | redefinir sus tokens de diseño ''--boton-*'' (nunca el ''privateState'') |
 ^ Cambiar todo el sistema | el tema (''mat.theme'') | cambiar las variables de SASS que generan las ''--mlt-sys-*'' | ^ Cambiar todo el sistema | el tema (''mat.theme'') | cambiar las variables de SASS que generan las ''--mlt-sys-*'' |
 ^ Variantes del componente | ''matButton="filled"'', ''"outlined"'', ''"text"'' | modificadores ''--importancia-primaria'', ''-secundaria'', ''-terciaria'' | ^ Variantes del componente | ''matButton="filled"'', ''"outlined"'', ''"text"'' | modificadores ''--importancia-primaria'', ''-secundaria'', ''-terciaria'' |
Línea 331: Línea 700:
  
 ==== Tokens de sistema ==== ==== Tokens de sistema ====
-Escribir a mano todos los tokens de sistema es largo y es fácil equivocarse. Con SASS se guardan los valores en listas y mapas y los tokens se generan con bucles. Así, para cambiar el sistema solo hay que cambiar las variables de SASS. Los colores se generan igual que en el [[clase:daw:diw:sass#ejercicio_1|ejercicio 1 de SASS]], ahora con el prefijo ''--mlt-sys-color-''.+Escribir a mano todos los tokens de sistema es largo y es fácil equivocarse. Con SASS se guardan los valores en listas y mapas y los tokens se generan con bucles. Así, para cambiar el sistema solo hay que cambiar las variables de SASS. Los colores se generan igual que en el [[clase:daw:diw:sass#ejercicio_1|ejercicio 1 de SASS]], ahora con el prefijo ''--mlt-sys-color-''. Estos son todos los tokens de sistema que usa el botón:
  
 <sxh sass> <sxh sass>
 @use "sass:list"; @use "sass:list";
 +@use "sass:meta";
  
 $colores: ( $colores: (
Línea 343: Línea 713:
   'blanco': (#EBEBEB, #EDEDED, #F0F0F0, #F2F2F2, #F5F5F5, #F7F7F7, #FAFAFA, #FCFCFC, #FFFFFF),   'blanco': (#EBEBEB, #EDEDED, #F0F0F0, #F2F2F2, #F5F5F5, #F7F7F7, #FAFAFA, #FCFCFC, #FFFFFF),
   'amarillo': (#6D5303, #9A7809, #C69C10, #E9BC1C, #ECC94B, #F2D978, #F7E7A6, #FCF4CF, #FFFFFF)   'amarillo': (#6D5303, #9A7809, #C69C10, #E9BC1C, #ECC94B, #F2D978, #F7E7A6, #FCF4CF, #FFFFFF)
 +);
 +
 +$fuentes: (
 +  'sans-serif': (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif),
 +  'monospace': (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
 +  'serif': (Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif)
 ); );
  
 $font-sizes: (10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 30px); $font-sizes: (10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 30px);
 +$paddings: (0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);
 +$border-radius: (1px, 2px, 4px, 6px);
 +$widths: (0px, 1px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);
 +$oscurecimientos: (0%, 5%, 10%, 15%, 20%, 25%, 30%);
  
 :root { :root {
Línea 353: Línea 733:
     }     }
   }   }
 +
 +  @each $nombre, $fuente in $fuentes {
 +    --mlt-sys-font-#{$nombre}: #{meta.inspect($fuente)};
 +  }
 +  --mlt-sys-font-default: var(--mlt-sys-font-sans-serif);
  
   @for $i from 1 through list.length($font-sizes) {   @for $i from 1 through list.length($font-sizes) {
     --mlt-sys-font-size-#{$i}: #{list.nth($font-sizes, $i)};     --mlt-sys-font-size-#{$i}: #{list.nth($font-sizes, $i)};
 +  }
 +
 +  // Los paddings, los anchos y los oscurecimientos empiezan en 0
 +  @for $i from 0 through list.length($paddings) - 1 {
 +    --mlt-sys-padding-#{$i}: #{list.nth($paddings, $i + 1)};
 +  }
 +
 +  @for $i from 1 through list.length($border-radius) {
 +    --mlt-sys-border-radius-#{$i}: #{list.nth($border-radius, $i)};
 +  }
 +
 +  @for $i from 0 through list.length($widths) - 1 {
 +    --mlt-sys-width-#{$i}: #{list.nth($widths, $i + 1)};
 +  }
 +
 +  @for $i from 0 through list.length($oscurecimientos) - 1 {
 +    --mlt-sys-oscurecimiento-#{$i}: #{list.nth($oscurecimientos, $i + 1)};
   }   }
 } }
Línea 366: Línea 768:
   --mlt-sys-color-principal-1: #011019;   --mlt-sys-color-principal-1: #011019;
   --mlt-sys-color-principal-2: #052F4D;   --mlt-sys-color-principal-2: #052F4D;
-  ...+  --mlt-sys-color-principal-3: #0B4D83; 
 +  --mlt-sys-color-principal-4: #1363B4; 
 +  --mlt-sys-color-principal-5: #1979E6; 
 +  --mlt-sys-color-principal-6: #4B8EEC; 
 +  --mlt-sys-color-principal-7: #80ADF4; 
 +  --mlt-sys-color-principal-8: #B2CAFA; 
 +  --mlt-sys-color-principal-9: #E6EDFE; 
 +  --mlt-sys-color-alternativo-1: #190801; 
 +  --mlt-sys-color-alternativo-2: #4D1D05; 
 +  --mlt-sys-color-alternativo-3: #83370B; 
 +  --mlt-sys-color-alternativo-4: #B45613; 
 +  --mlt-sys-color-alternativo-5: #E67519; 
 +  --mlt-sys-color-alternativo-6: #EC9C4B; 
 +  --mlt-sys-color-alternativo-7: #F4BE80; 
 +  --mlt-sys-color-alternativo-8: #FADCB2; 
 +  --mlt-sys-color-alternativo-9: #FEF5E6; 
 +  --mlt-sys-color-rojo-1: #190501; 
 +  --mlt-sys-color-rojo-2: #4D0D05; 
 +  --mlt-sys-color-rojo-3: #83150B; 
 +  --mlt-sys-color-rojo-4: #B41813; 
 +  --mlt-sys-color-rojo-5: #E61919; 
 +  --mlt-sys-color-rojo-6: #EC534B; 
 +  --mlt-sys-color-rojo-7: #F48A80; 
 +  --mlt-sys-color-rojo-8: #FABCB2; 
 +  --mlt-sys-color-rojo-9: #FEEAE6; 
 +  --mlt-sys-color-gris-1: #1D2830; 
 +  --mlt-sys-color-gris-2: #323E49; 
 +  --mlt-sys-color-gris-3: #485461; 
 +  --mlt-sys-color-gris-4: #5C6775; 
 +  --mlt-sys-color-gris-5: #717D8E; 
 +  --mlt-sys-color-gris-6: #8A93A3; 
 +  --mlt-sys-color-gris-7: #A1A9BA; 
 +  --mlt-sys-color-gris-8: #B6BDCD; 
 +  --mlt-sys-color-gris-9: #CFD4E2; 
 +  --mlt-sys-color-blanco-1: #EBEBEB; 
 +  --mlt-sys-color-blanco-2: #EDEDED; 
 +  --mlt-sys-color-blanco-3: #F0F0F0; 
 +  --mlt-sys-color-blanco-4: #F2F2F2; 
 +  --mlt-sys-color-blanco-5: #F5F5F5; 
 +  --mlt-sys-color-blanco-6: #F7F7F7; 
 +  --mlt-sys-color-blanco-7: #FAFAFA; 
 +  --mlt-sys-color-blanco-8: #FCFCFC; 
 +  --mlt-sys-color-blanco-9: #FFFFFF; 
 +  --mlt-sys-color-amarillo-1: #6D5303; 
 +  --mlt-sys-color-amarillo-2: #9A7809; 
 +  --mlt-sys-color-amarillo-3: #C69C10; 
 +  --mlt-sys-color-amarillo-4: #E9BC1C; 
 +  --mlt-sys-color-amarillo-5: #ECC94B; 
 +  --mlt-sys-color-amarillo-6: #F2D978; 
 +  --mlt-sys-color-amarillo-7: #F7E7A6; 
 +  --mlt-sys-color-amarillo-8: #FCF4CF;
   --mlt-sys-color-amarillo-9: #FFFFFF;   --mlt-sys-color-amarillo-9: #FFFFFF;
 +  --mlt-sys-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 +  --mlt-sys-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 +  --mlt-sys-font-serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif;
 +  --mlt-sys-font-default: var(--mlt-sys-font-sans-serif);
   --mlt-sys-font-size-1: 10px;   --mlt-sys-font-size-1: 10px;
-  ...+  --mlt-sys-font-size-2: 12px; 
 +  --mlt-sys-font-size-3: 14px; 
 +  --mlt-sys-font-size-4: 16px; 
 +  --mlt-sys-font-size-5: 18px; 
 +  --mlt-sys-font-size-6: 20px; 
 +  --mlt-sys-font-size-7: 22px; 
 +  --mlt-sys-font-size-8: 24px; 
 +  --mlt-sys-font-size-9: 26px; 
 +  --mlt-sys-font-size-10: 28px;
   --mlt-sys-font-size-11: 30px;   --mlt-sys-font-size-11: 30px;
 +  --mlt-sys-padding-0: 0px;
 +  --mlt-sys-padding-1: 4px;
 +  --mlt-sys-padding-2: 8px;
 +  --mlt-sys-padding-3: 12px;
 +  --mlt-sys-padding-4: 16px;
 +  --mlt-sys-padding-5: 20px;
 +  --mlt-sys-padding-6: 24px;
 +  --mlt-sys-padding-7: 28px;
 +  --mlt-sys-padding-8: 32px;
 +  --mlt-sys-padding-9: 36px;
 +  --mlt-sys-padding-10: 40px;
 +  --mlt-sys-border-radius-1: 1px;
 +  --mlt-sys-border-radius-2: 2px;
 +  --mlt-sys-border-radius-3: 4px;
 +  --mlt-sys-border-radius-4: 6px;
 +  --mlt-sys-width-0: 0px;
 +  --mlt-sys-width-1: 1px;
 +  --mlt-sys-width-2: 4px;
 +  --mlt-sys-width-3: 8px;
 +  --mlt-sys-width-4: 12px;
 +  --mlt-sys-width-5: 16px;
 +  --mlt-sys-width-6: 20px;
 +  --mlt-sys-width-7: 24px;
 +  --mlt-sys-width-8: 28px;
 +  --mlt-sys-width-9: 32px;
 +  --mlt-sys-width-10: 36px;
 +  --mlt-sys-width-11: 40px;
 +  --mlt-sys-oscurecimiento-0: 0%;
 +  --mlt-sys-oscurecimiento-1: 5%;
 +  --mlt-sys-oscurecimiento-2: 10%;
 +  --mlt-sys-oscurecimiento-3: 15%;
 +  --mlt-sys-oscurecimiento-4: 20%;
 +  --mlt-sys-oscurecimiento-5: 25%;
 +  --mlt-sys-oscurecimiento-6: 30%;
 } }
 </sxh> </sxh>
  
-El resto de tokens de sistema (márgenes, paddings, fuentes...) se generan igual. Es lo que se pide en los ejercicios.+Los márgenes, que no usa el botón, se generan igual que los paddings.
  
 ==== Tokens de diseño ==== ==== Tokens de diseño ====
Línea 381: Línea 879:
 <sxh sass> <sxh sass>
 .c-boton { .c-boton {
-  // Parte pública: tokens de diseño +  // Tokens de diseño: decisiones del diseñador, un valor cada uno 
-  --boton-color-strong: var(--mlt-sys-color-principal-5); +  --boton-color-normal: var(--mlt-sys-color-principal-5); 
-  --boton-color-weak: var(--mlt-sys-color-blanco-9);+  --boton-color-alternativa: var(--mlt-sys-color-alternativo-5); 
 +  --boton-color-peligrosa: var(--mlt-sys-color-rojo-5); 
 +  --boton-color-texto-primaria: var(--mlt-sys-color-blanco-9); 
   --boton-font-family: var(--mlt-sys-font-default);   --boton-font-family: var(--mlt-sys-font-default);
-  --boton-font-size: var(--mlt-sys-font-size-4); +  --boton-font-size-s: var(--mlt-sys-font-size-3); 
-  --boton-padding: var(--mlt-sys-padding-3);+  --boton-font-size-m: var(--mlt-sys-font-size-4); 
 +  --boton-font-size-l: var(--mlt-sys-font-size-6); 
 +  --boton-padding-vertical-s: var(--mlt-sys-padding-1); 
 +  --boton-padding-vertical-m: var(--mlt-sys-padding-2); 
 +  --boton-padding-vertical-l: var(--mlt-sys-padding-3); 
 +  --boton-padding-horizontal-s: var(--mlt-sys-padding-3); 
 +  --boton-padding-horizontal-m: var(--mlt-sys-padding-4); 
 +  --boton-padding-horizontal-l: var(--mlt-sys-padding-6);
   --boton-border-width: var(--mlt-sys-width-1);   --boton-border-width: var(--mlt-sys-width-1);
   --boton-border-radius: var(--mlt-sys-border-radius-4);   --boton-border-radius: var(--mlt-sys-border-radius-4);
 +  --boton-hover-oscurecimiento: var(--mlt-sys-oscurecimiento-3);
  
-  // Parte privada: estado del botón 
-  --boton-privateState-background-color: var(--boton-color-strong); 
-  --boton-privateState-border-color: var(--boton-color-strong); 
-  --boton-privateState-text-color: var(--boton-color-weak); 
  
-  // Propiedades CSS: solo usan variables del botón+  // Estado privado: por defecto, normal, primaria, tamaño m y sin hover 
 +  --boton-privateState-color: var(--boton-color-normal); 
 +  --boton-privateState-oscurecimiento: 0%; 
 +  --boton-privateState-color-final: color-mix(in oklab, var(--boton-privateState-color), black var(--boton-privateState-oscurecimiento)); 
 +  --boton-privateState-background-color: var(--boton-privateState-color-final); 
 +  --boton-privateState-border-color: var(--boton-privateState-color-final); 
 +  --boton-privateState-text-color: var(--boton-color-texto-primaria); 
 +  --boton-privateState-font-size: var(--boton-font-size-m); 
 +  --boton-privateState-padding-vertical: var(--boton-padding-vertical-m); 
 +  --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m); 
 + 
 +  // Propiedades CSS: solo usan el estado y los tokens
   font-family: var(--boton-font-family);   font-family: var(--boton-font-family);
-  font-size: var(--boton-font-size); +  font-size: var(--boton-privateState-font-size); 
-  padding: var(--boton-padding);+  padding: var(--boton-privateState-padding-vertical) var(--boton-privateState-padding-horizontal);
  
   border-radius: var(--boton-border-radius);   border-radius: var(--boton-border-radius);
Línea 412: Línea 928:
   color: var(--boton-privateState-text-color);   color: var(--boton-privateState-text-color);
  
-  // La función cambia un token de diseño+  // La función elige qué token de color se usa
   &--funcion-normal {   &--funcion-normal {
-    --boton-color-strong: var(--mlt-sys-color-principal-5);+    --boton-privateState-color: var(--boton-color-normal);
   }   }
   &--funcion-alternativa {   &--funcion-alternativa {
-    --boton-color-strong: var(--mlt-sys-color-alternativo-5);+    --boton-privateState-color: var(--boton-color-alternativa);
   }   }
   &--funcion-peligrosa {   &--funcion-peligrosa {
-    --boton-color-strong: var(--mlt-sys-color-rojo-5);+    --boton-privateState-color: var(--boton-color-peligrosa);
   }   }
  
-  // La importancia cambia el estado+  // La importancia decide dónde va el color: fondo, borde o texto
   &--importancia-primaria {   &--importancia-primaria {
-    --boton-privateState-background-color: var(--boton-color-strong); +    --boton-privateState-background-color: var(--boton-privateState-color-final); 
-    --boton-privateState-border-color: var(--boton-color-strong); +    --boton-privateState-border-color: var(--boton-privateState-color-final); 
-    --boton-privateState-text-color: var(--boton-color-weak);+    --boton-privateState-text-color: var(--boton-color-texto-primaria);
   }   }
   &--importancia-secundaria {   &--importancia-secundaria {
-    --boton-privateState-background-color: var(--boton-color-weak); +    --boton-privateState-background-color: transparent; 
-    --boton-privateState-border-color: var(--boton-color-strong); +    --boton-privateState-border-color: var(--boton-privateState-color-final); 
-    --boton-privateState-text-color: var(--boton-color-strong);+    --boton-privateState-text-color: var(--boton-privateState-color-final);
   }   }
   &--importancia-terciaria {   &--importancia-terciaria {
-    --boton-privateState-background-color: var(--boton-color-weak); +    --boton-privateState-background-color: transparent; 
-    --boton-privateState-border-color: var(--boton-color-weak); +    --boton-privateState-border-color: transparent; 
-    --boton-privateState-text-color: var(--boton-color-strong);+    --boton-privateState-text-color: var(--boton-privateState-color-final); 
 +  } 
 + 
 +  // El tamaño elige qué tokens de font-size y padding se usan 
 +  &--size-s { 
 +    --boton-privateState-font-size: var(--boton-font-size-s); 
 +    --boton-privateState-padding-vertical: var(--boton-padding-vertical-s); 
 +    --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-s); 
 +  } 
 +  &--size-m { 
 +    --boton-privateState-font-size: var(--boton-font-size-m); 
 +    --boton-privateState-padding-vertical: var(--boton-padding-vertical-m); 
 +    --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-m); 
 +  } 
 +  &--size-l { 
 +    --boton-privateState-font-size: var(--boton-font-size-l); 
 +    --boton-privateState-padding-vertical: var(--boton-padding-vertical-l); 
 +    --boton-privateState-padding-horizontal: var(--boton-padding-horizontal-l); 
 +  } 
 + 
 +  // Al pasar el ratón, el color se oscurece 
 +  &:hover { 
 +    --boton-privateState-oscurecimiento: var(--boton-hover-oscurecimiento);
   }   }
 } }
Línea 446: Línea 984:
  
 ==== Ejercicio 1 ==== ==== Ejercicio 1 ====
-Dadas las listas:+Los paddings y los márgenes van de 4 en 4, así que no hace falta escribirlos en una lista: se pueden calcular. Dadas las variables:
  
 <sxh sass> <sxh sass>
-$paddings: (0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px); +$paso: 4px; 
-$margins: (0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);+$numero-pasos: 10;
 </sxh> </sxh>
  
-Genera los tokens de sistema de paddings y márgenes. Empiezan en 0:+Genera con un ''@for'' los tokens de sistema de paddings y márgenes sin escribir ninguna lista. Empiezan en 0:
  
 <sxh css> <sxh css>
Línea 466: Línea 1004:
 } }
 </sxh> </sxh>
 +
 +Cambia ''$paso'' a ''5px'' y comprueba que cambian todos los paddings y márgenes, y con ellos el botón.
  
  
 ==== Ejercicio 2 ==== ==== Ejercicio 2 ====
-Dado el mapa:+Al pulsar el botón (''<nowiki>:active</nowiki>'') se tiene que oscurecer más que con el ratón encima: un 25%. 
 +  * Di qué tokens de sistema, tokens de diseño y estados privados hacen falta, y cuáles de ellos son nuevos. 
 +  * Añádelo al botón en SASS sin tocar sus propiedades CSS ni los modificadores que ya tiene.
  
-<sxh sass> +Comprueba en el navegador que el botón se oscurece un poco al pasar el ratón y más al pulsarlo, en las tres importancias.
-$fuentes: ( +
-  'sans-serif': (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif), +
-  'serif': (Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif), +
-  'monospace': (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) +
-); +
-</sxh>+
  
-Genera los tokens de sistema de las fuentes y el de la fuente por defecto, que es la ''sans-serif'': 
  
-<sxh css> +==== Ejercicio 3 ==== 
-:root { +Junta en un único fichero SASS todas las variables de SASS del sistema (colores, tamaños de fuente, márgenes, paddings, oscurecimientos, fuentes, border-radius y anchos) y genera con él todo el ''<nowiki>:root</nowiki>'' de los tokens de sistema del tema.
-  --mlt-sys-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +
-  --mlt-sys-font-serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif; +
-  --mlt-sys-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +
-  --mlt-sys-font-default: var(--mlt-sys-font-sans-serif); +
-} +
-</sxh>+
  
 +Cambia ahora el color principal por un verde (genera sus 9 tonos con el [[https://logongas.github.io/color-schemes-generator/|Color Scheme Generator]]) y comprueba que el botón cambia de color sin tocar su CSS.
  
-==== Ejercicio 3 ==== 
-Junta en un único fichero SASS todas las variables de SASS del sistema (colores, tamaños de fuente, márgenes, paddings, fuentes, border-radius y anchos) y genera con él todo el ''<nowiki>:root</nowiki>'' de los tokens de sistema del tema. 
  
-Cambia ahora el color principal por un verde (genera sus 9 tonos con el [[https://logongas.github.io/color-schemes-generator/|Color Scheme Generator]]) y comprueba que el botón cambia de color sin tocar su CSS.+==== Ejercicio 4 ==== 
 +Haz en SASS el componente ''c-panel'' con tokens de diseño y estado privado, igual que el botón, para que se puedan hacer estos 3 paneles: 
 + 
 +{{:clase:daw:diw:ejercicio_paneles.png?400|}} 
 + 
 +  * Los tokens de diseño se llaman ''--panel-*'' y su valor por defecto es un token de sistema. 
 +  * El color lo elige la función, con los modificadores ''c-panel--funcion-normal'', ''c-panel--funcion-alternativa'' y ''c-panel--funcion-peligrosa''. 
 +  * Los elementos ''c-panel<nowiki>__</nowiki>titulo'' y ''c-panel<nowiki>__</nowiki>contenido'' no llevan modificadores: el color les llega por el estado privado del bloque. 
 + 
 +Crea una página HTML con los 3 paneles y comprueba que, al cambiar el color principal por el verde del ejercicio 3, el panel normal también cambia sin tocar su CSS. 
  
clase/daw/diw/sistema-diseno-tokens.1792791361.txt.gz · Última modificación: por claude