@khipu/design-system 0.2.0-alpha.84 → 0.2.0-alpha.86

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-07-01T17:49:00.275Z
+ * Generated: 2026-07-01T20:05:55.906Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -363,6 +363,7 @@
      RESPONSIVE TYPOGRAPHY (MOBILE BASE)
      ========================================================================== */
 
+  --kds-font-size-2xs: 0.5625rem;
 
   /* Base font-size scale */
   --kds-font-size-xs: 0.6875rem;
@@ -410,6 +411,7 @@
 /* Tablet (600px+) - Typography */
 @media (min-width: 600px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
 
     /* Base font-size scale */
     --kds-font-size-xs: 0.75rem;
@@ -447,6 +449,7 @@
 /* Desktop (840px+) - Typography */
 @media (min-width: 840px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
 
     /* Base font-size scale */
     --kds-font-size-xs: 0.75rem;
@@ -2891,7 +2894,7 @@ label.radio {
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
-    font-size: 16px;
+    font-size: var(--kds-font-size-sm);
     line-height: 1.5;
     color: var(--kds-color-text-primary);
 }
@@ -4732,6 +4735,35 @@ dialog#surveyModal button.circle {
     text-transform: uppercase;
 }
 
+/* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro). */
+.kds-text-value {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-relaxed);
+    color: var(--kds-color-gray-800);
+}
+
+/* Code — texto tipo código/referencia (mono, uppercase, gris), como el "CÓDIGO" del header. */
+.kds-text-code {
+    font-family: var(--kds-font-family-mono);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-regular);
+    letter-spacing: var(--kds-letter-spacing-wider);
+    font-variant-numeric: tabular-nums;
+    color: var(--kds-color-gray-400);
+    text-transform: uppercase;
+}
+
+/* Caption — texto muy chico y liviano para pie de página (ej. número de versión). */
+.kds-text-caption {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-2xs);
+    font-weight: var(--kds-font-weight-regular);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-gray-400);
+}
+
 .kds-text-link {
     font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
     font-size: inherit;
@@ -5750,10 +5782,8 @@ button.kds-fab:focus-visible {
     display: block;
     object-fit: contain;
     overflow: visible;
-    /* Nudge óptico: la tinta del wordmark queda ~1px alta dentro de su viewBox (45x15),
-       así que al centrar por caja se ve desalineada respecto a la baseline del texto. */
-    position: relative;
-    top: 1px;
+    /* La tinta del wordmark ocupa casi todo su viewBox (45x15), así que el centro de caja
+       coincide con el óptico: se alinea por `align-items: center` del footer, sin nudge. */
 }
 
 /* Divisor entre el logo de Khipu y el del PSP ("Khipu | klap") */