Diferencias

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

--- clase:daw:diw:sistema-diseno-tokens [2026/10/24 01:04] – SASS: se generan todos los tokens de sistema que usa el botón y se muestra el CSS completo claude
+++ clase: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 984: / Línea 984: @@
 ==== 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>
-$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;
-$oscurecimientos: (0%, 5%, 10%, 15%, 20%, 25%, 30%);
 </sxh>
-Genera los tokens de sistema de paddings, márgenes y oscurecimientos. 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>
@@ Línea 1003: / Línea 1002: @@
   ...
   --mlt-sys-margin-10: 40px;
-  --mlt-sys-oscurecimiento-0: 0%;
-  ...
-  --mlt-sys-oscurecimiento-6: 30%;
 }
 </sxh>
+Cambia ''$paso'' a ''5px'' y comprueba que cambian todos los paddings y márgenes, y con ellos el botón.
 ==== 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>
-:root {
-  --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>