@kaufmann-lab/ui 0.1.9 → 0.1.13

package/fesm2022/mapbox-gl-csp.worker.js

@@ -0,0 +1,6 @@
+// Asset copiado tal cual por `ng-package.json` — nunca pasa por el compilador
+// de Angular/TypeScript. Ver el comentario en `MapView.ts` sobre por qué
+// `new Worker(new URL('./mapbox-gl-csp.worker.js', import.meta.url))` necesita
+// que este archivo exista de forma real, junto al bundle publicado, en vez de
+// ser solo un import de TypeScript más.
+import 'mapbox-gl/dist/mapbox-gl-csp-worker.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.9",
+  "version": "0.1.13",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",
@@ -13,6 +13,7 @@
     "@angular/core": "^22.1.0"
   },
   "dependencies": {
+    "mapbox-gl": "^3.30.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/src/tokens/base.css

@@ -31,6 +31,18 @@
    */
   --kf-color-tertiary-deep: #003252;
 
+  /*
+   * Gradiente del sidebar de navegación persistente (`kf-sidebar-shell`) y,
+   * a futuro, Servicio Star, que usa el mismo patrón de sidebar según el
+   * design system. Valores propios — NO reutilizar `-primary-active`/
+   * `-tertiary-deep` de arriba: son visualmente parecidos pero no iguales
+   * (ver `css/otd.css` del design system, regla `.side`), y quedaron
+   * confundidos entre sí una vez ya (versión inicial de `kf-sidebar-shell`
+   * usaba los tokens de marca genéricos por error).
+   */
+  --kf-color-sidebar-gradient-from: #002a47;
+  --kf-color-sidebar-gradient-to: #001f36;
+
   /*
    * Oscurecido desde el naranja de marca original (#e6750c) — con texto
    * blanco (kf-button variant="secondary") el tono original daba 3.04:1,
@@ -69,6 +81,17 @@
   --kf-color-info-soft: #eaf3ff;
   --kf-color-info-strong: #155bb5;
 
+  /*
+   * Acento morado — no es un color semántico de estado (no significa
+   * éxito/error/warning), es un acento de marca puntual del portal OTD
+   * (bonos/beneficios en el Design System Divemotor). Documentado como
+   * caso aislado a propósito: si aparece en más de un portal o más de
+   * una sección, conviene revisar si merece nombre semántico propio.
+   */
+  --kf-color-purple: #4a2f82;
+  --kf-color-purple-soft: #efeaf8;
+  --kf-color-purple-strong: #33215c;
+
   /* ---------- Neutros (iguales en todos los temas) ---------- */
   --kf-color-ink: #171d25;
   --kf-color-surface: #f5f7fa;
@@ -122,8 +145,19 @@
   --kf-font-size-body-sm: 0.875rem;
   --kf-font-size-caption: 0.75rem;
 
+  /*
+   * Tier "hero" — por encima del máximo de la auditoría de arriba (2.125rem).
+   * No cubre contenido de página, sino títulos protagonistas de una sola
+   * pantalla (ej. bienvenida del home vía `kf-page-header[size=xl|xxl]`).
+   * Se agregan acá para que sigan siendo variantes de `kf-text` en vez de
+   * un tamaño local duplicado por componente.
+   */
+  --kf-font-size-title-xl: 2rem;
+  --kf-font-size-title-xxl: 2.5rem;
+
   /* ---------- Peso de fuente ---------- */
   --kf-font-weight-title: 700;
+  --kf-font-weight-medium: 600;
   --kf-font-weight-body: 400;
 
   /* ---------- Espaciado (escala 4/8px) ---------- */
@@ -146,4 +180,43 @@
   --kf-shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
   --kf-shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.16);
   --kf-shadow-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
+  /*
+   * Variante del anillo de foco para campos `invalid` + enfocados
+   * (`kf-input`/`kf-select`/`kf-textarea`). El valor RGB es
+   * `--kf-color-error` (#bc4545) escrito a mano porque `rgba()` no puede
+   * resolver un color hex vía `var()` — si `--kf-color-error` cambia, este
+   * token hay que actualizarlo a mano también.
+   */
+  --kf-shadow-focus-error: 0 0 0 3px rgba(188, 69, 69, 0.22);
+
+  /*
+   * ---------- Anchos de controles de formulario ----------
+   * Usados por `width` de `kf-select`/`kf-multi-select`. `md` (240px) es
+   * el ancho fijo histórico de ambos componentes, ahora expresado como
+   * token en vez de un valor suelto en cada CSS — el valor no cambia.
+   */
+  --kf-select-width-sm: 160px;
+  --kf-select-width-md: 240px;
+  --kf-select-width-lg: 320px;
+
+  /*
+   * ---------- Geometría del checkbox ----------
+   * Compartida por `kf-checkbox` y el checkbox visual interno de
+   * `kf-multi-select` (ver shared/checkbox-mark.css). Vive acá y no en ese
+   * archivo porque es un stylesheet de componente (`styleUrl`, encapsulación
+   * Emulated por defecto): Angular le agrega el atributo de scoping a
+   * cualquier selector que declare, `:root` incluido, y `:root[_ngcontent-xxx]`
+   * nunca matchea el `<html>` real — las variables quedaban sin definir y
+   * cada `var()` que las consumía caía a su valor inicial (0px/none), sin
+   * checkmark ni barra "−" visibles pese a que el resto del box sí se veía.
+   * Es geometría fija, no color de marca: no depende de tema, por eso no
+   * hay overrides en themes/*.css para estas variables (mismo criterio que
+   * los anchos de select de arriba).
+   */
+  --kf-checkbox-mark-width: 4px;
+  --kf-checkbox-mark-height: 8px;
+  --kf-checkbox-mark-border: solid var(--kf-color-white);
+  --kf-checkbox-mark-border-width: 0 2px 2px 0;
+  --kf-checkbox-dash-width: 8px;
+  --kf-checkbox-dash-height: 2px;
 }

package/src/tokens/themes/andes-maq.css

@@ -11,6 +11,13 @@
  * hex de este archivo. No requiere ningún otro cambio de código ni de
  * arquitectura — ese es el propósito de tener el theming en un archivo
  * separado por tema.
+ *
+ * La swatch de la página 6 lista negro → ocre → rojo → blanco; el rojo no
+ * tiene token propio acá a propósito — es acento de marca, no un color de
+ * acción de `kf-button` (`--kf-color-secondary` cumple ese rol y ya lo hace
+ * con el ocre). Mismo criterio aplicado en `divemotor-star.css`, donde SÍ
+ * hacía falta corregirlo porque el rojo de esa marca había quedado
+ * mapeado al color de acción.
  */
 
 [data-theme='andes-maq'] {

package/src/tokens/themes/divemotor-star.css

@@ -11,6 +11,19 @@
  * hex de este archivo. No requiere ningún otro cambio de código ni de
  * arquitectura — ese es el propósito de tener el theming en un archivo
  * separado por tema.
+ *
+ * `--kf-color-secondary` NO es el rojo de la identidad de STAR (la propia
+ * swatch de la página 6 lo lista como acento, no como color dominante) —
+ * es el mismo rol que cumple en cualquier otro tema: segundo color de
+ * acción de `kf-button`. Pintar botones de acción con el rojo de marca los
+ * volvía indistinguibles de una alerta real (`--kf-color-error`, el rojo
+ * semántico que ya usa el tablero para "en riesgo") — dos rojos con
+ * significados distintos compitiendo por la misma atención. El azul
+ * elegido (`#0e6ba8`) es un tono propio, distinto del `primary` marino y
+ * del secondary de `kaufmann-ar` (`#1a5fd0`), para que los temas de la
+ * familia azul sigan siendo distinguibles entre sí — 5.7:1 contra blanco,
+ * sobre el mínimo AA de 4.5:1 (mismo criterio que ya oscureció el ocre de
+ * `andes-maq` por la misma razón).
  */
 
 [data-theme='divemotor-star'] {
@@ -19,7 +32,7 @@
   --kf-color-primary-active: #072347;
   --kf-color-primary-soft: #e8f0fd;
 
-  --kf-color-secondary: #c8102e;
-  --kf-color-secondary-hover: #a80d26;
-  --kf-color-secondary-soft: #fdecef;
+  --kf-color-secondary: #0e6ba8;
+  --kf-color-secondary-hover: #0b568a;
+  --kf-color-secondary-soft: #e5f2fa;
 }