Diferencias

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

--- clase:daw:diw:sistema-diseno-tokens [2026/10/24 01:00] – Hover: se dice que hacen falta tokens de sistema nuevos además de tokens de diseño y estado privado 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 700: / Línea 700: @@
 ==== 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>
 @use "sass:list";
+@use "sass:meta";
 $colores: (
@@ Línea 712: / Línea 713: @@
   'blanco': (#EBEBEB, #EDEDED, #F0F0F0, #F2F2F2, #F5F5F5, #F7F7F7, #FAFAFA, #FCFCFC, #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);
+$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 {
@@ Línea 722: / 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) {
     --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 735: / Línea 768: @@
   --mlt-sys-color-principal-1: #011019;
   --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-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-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-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>
-El resto de tokens de sistema (márgenes, paddings, oscurecimientos, 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 ====
@@ Línea 855: / 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 874: / 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>