@kaufmann-lab/ui 0.1.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@kaufmann-lab/ui",
+  "version": "0.1.0",
+  "description": "Shared Angular component library for the Kaufmann frontends",
+  "license": "MIT",
+  "author": "Kaufmann Lab",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/kaufmann-lab-ui.mjs",
+  "typings": "types/kaufmann-lab-ui.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/kaufmann-lab-ui.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui.mjs"
+    }
+  },
+  "type": "module"
+}

package/src/tokens/base.css

@@ -0,0 +1,116 @@
+/*
+ * Base de tokens semánticos de @kaufmann-lab/ui.
+ *
+ * Este archivo NO define colores de marca. Define los NOMBRES de variable
+ * que cualquier componente de la librería puede usar (--kf-color-primary,
+ * --kf-space-md, etc.) y les da un valor de respaldo aquí mismo, bajo :root,
+ * sin necesitar ningún atributo en el HTML.
+ *
+ * Ese valor de respaldo es el tema "default" — ver themes/default.css, que
+ * hoy usa los mismos colores que "divemotor" a propósito: si algún día se
+ * agrega un cliente/tema nuevo sin colores confirmados todavía, cae en un
+ * placeholder neutro, no en la marca de otra división.
+ *
+ * Los archivos de themes/*.css SOBRESCRIBEN estas mismas variables bajo un
+ * selector [data-theme="..."] — nunca agregan variables nuevas. Un componente
+ * nunca debe usar un color fuera de este archivo.
+ */
+
+:root {
+  /* ---------- Color de marca ---------- */
+  --kf-color-primary: #0066cc;
+  --kf-color-primary-hover: #0b5fff;
+  --kf-color-primary-active: #004f9e;
+  --kf-color-primary-soft: #e8f2ff;
+
+  /*
+   * Azul profundo de marca — fondo de superficies oscuras (Portal Header,
+   * Feature Card, slide destacado de Carousel). Distinto de `-active`
+   * (que es un estado de interacción, no un color de superficie): este es
+   * el "Tertiary / Deep" de la página 2 del design system.
+   */
+  --kf-color-tertiary-deep: #003252;
+
+  --kf-color-secondary: #e6750c;
+  --kf-color-secondary-hover: #c4650a;
+  --kf-color-secondary-soft: #fff0e3;
+  --kf-color-secondary-strong: #954e08;
+
+  /* ---------- Semánticos de estado (iguales en todos los temas) ---------- */
+  --kf-color-success: #27ae60;
+  --kf-color-success-soft: #e7f6ee;
+  --kf-color-success-strong: #146c38;
+
+  --kf-color-warning: #e2b93b;
+  --kf-color-warning-soft: #fff8db;
+  --kf-color-warning-strong: #8a6a00;
+
+  --kf-color-error: #eb5757;
+  /* Usado también como estado hover/active del botón `danger` — mismo rojo
+     que "error", ver Button.ts (el PDF define un único rojo semántico). */
+  --kf-color-error-hover: #d64545;
+  --kf-color-error-soft: #fdecec;
+  --kf-color-error-strong: #a42d2d;
+
+  --kf-color-info: #2f80ed;
+  --kf-color-info-soft: #eaf3ff;
+  --kf-color-info-strong: #155bb5;
+
+  /* ---------- Neutros (iguales en todos los temas) ---------- */
+  --kf-color-ink: #171d25;
+  --kf-color-surface: #f5f7fa;
+  --kf-color-white: #ffffff;
+  --kf-color-border: #dde3ee;
+  --kf-color-border-strong: #c1c6d5;
+  --kf-color-text: #414753;
+  --kf-color-text-muted: #727784;
+
+  /*
+   * Escala de grises neutros (página 3 del design system), expuesta por
+   * número para los casos que no encajan en un alias semántico de arriba.
+   * Donde SÍ hay alias, apuntan al mismo valor — nunca uses el alias y el
+   * número con distinto propósito en un mismo componente:
+   *   gray-800 (#242a33) → sin alias todavía
+   *   gray-700 (#414753) → alias: --kf-color-text
+   *   gray-600 (#727784) → alias: --kf-color-text-muted
+   *   gray-500 (#9aa0ad) → sin alias todavía
+   *   gray-400 (#c1c6d5) → alias: --kf-color-border-strong
+   *   gray-300 (#dde3ee) → alias: --kf-color-border
+   *   gray-200 (#e7ebf2) → sin alias todavía
+   *   gray-100 (#f1f4f9) → sin alias todavía
+   */
+  --kf-color-gray-800: #242a33;
+  --kf-color-gray-700: var(--kf-color-text);
+  --kf-color-gray-600: var(--kf-color-text-muted);
+  --kf-color-gray-500: #9aa0ad;
+  --kf-color-gray-400: var(--kf-color-border-strong);
+  --kf-color-gray-300: var(--kf-color-border);
+  --kf-color-gray-200: #e7ebf2;
+  --kf-color-gray-100: #f1f4f9;
+
+  /* ---------- Tipografía ---------- */
+  --kf-font-title: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+  --kf-font-body: 'Roboto', system-ui, -apple-system, sans-serif;
+  --kf-font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+
+  /* ---------- Espaciado (escala 4/8px) ---------- */
+  --kf-space-xs: 4px;
+  --kf-space-sm: 8px;
+  --kf-space-md: 16px;
+  --kf-space-lg: 24px;
+  --kf-space-xl: 32px;
+
+  /* ---------- Radios ---------- */
+  --kf-radius-xs: 6px;
+  --kf-radius-sm: 8px;
+  --kf-radius-md: 12px;
+  --kf-radius-lg: 16px;
+  --kf-radius-pill: 999px;
+
+  /* ---------- Sombras ---------- */
+  --kf-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --kf-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
+  --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);
+}

package/src/tokens/index.css

@@ -0,0 +1,23 @@
+/*
+ * Punto de entrada único de los tokens de @kaufmann-lab/ui.
+ *
+ * Cada frontend que consume la librería importa SOLO este archivo (no cada
+ * tema por separado) y activa un tema con un atributo en el elemento raíz:
+ *
+ *   <html data-theme="andes-maq">
+ *
+ * Sin ningún atributo, la app ya tiene colores válidos (tema "default",
+ * definido directo en base.css bajo :root) — ninguna pantalla queda sin
+ * estilo por un data-theme olvidado.
+ *
+ * El orden de importación importa: base.css primero (declara las variables
+ * y su valor de respaldo), los temas después (las sobrescriben bajo su
+ * propio selector [data-theme="..."]).
+ */
+
+@import './base.css';
+@import './themes/default.css';
+@import './themes/divemotor.css';
+@import './themes/divemotor-star.css';
+@import './themes/andes-maq.css';
+@import './themes/kaufmann-ar.css';

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

@@ -0,0 +1,25 @@
+/*
+ * Tema "andes-maq" — división Andes Maq del ERP de Asistencia en Ruta y
+ * Terreno (Chile y Perú, maquinaria pesada).
+ *
+ * ⚠️ REFERENCIAL, NO VALIDADO. Fuente: "Presentación_ERP_Asistencia_Terreno_v2.pdf",
+ * página 6, nota al pie: "Paletas referenciales construidas a partir de la
+ * identidad pública de cada sitio — validar los valores exactos con
+ * Marketing antes de la implementación."
+ *
+ * Cuando Marketing confirme la paleta real, reemplazar solo los valores
+ * 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.
+ */
+
+[data-theme='andes-maq'] {
+  --kf-color-primary: #1a1a1a;
+  --kf-color-primary-hover: #000000;
+  --kf-color-primary-active: #000000;
+  --kf-color-primary-soft: #f1f4f9;
+
+  --kf-color-secondary: #c47f00;
+  --kf-color-secondary-hover: #a66900;
+  --kf-color-secondary-soft: #fdf3e0;
+}

package/src/tokens/themes/default.css

@@ -0,0 +1,17 @@
+/*
+ * Tema "default" — rol técnico, no una marca real.
+ *
+ * Estos valores viven directo en base.css bajo :root, así que este archivo
+ * no necesita ningún selector [data-theme]: es lo que ya está activo si
+ * nadie aplicó ningún atributo de tema. Existe para que ninguna pantalla
+ * quede sin color por un data-theme olvidado.
+ *
+ * Hoy coincide con "divemotor" a propósito (ver themes/divemotor.css) — son
+ * el mismo valor por casualidad, no por definición. Si mañana se agrega un
+ * cliente nuevo sin paleta confirmada todavía, cae en ESTE fallback neutro,
+ * nunca en la marca de otra división.
+ *
+ * Este archivo se deja vacío de overrides intencionalmente: los valores de
+ * base.css ya son el default. No agregar aquí un selector [data-theme="default"]
+ * — si se necesita, sería redundante con :root.
+ */

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

@@ -0,0 +1,25 @@
+/*
+ * Tema "divemotor-star" — división Divemotor STAR del ERP de Asistencia
+ * en Ruta y Terreno (Perú).
+ *
+ * ⚠️ REFERENCIAL, NO VALIDADO. Fuente: "Presentación_ERP_Asistencia_Terreno_v2.pdf",
+ * página 6, nota al pie: "Paletas referenciales construidas a partir de la
+ * identidad pública de cada sitio — validar los valores exactos con
+ * Marketing antes de la implementación."
+ *
+ * Cuando Marketing confirme la paleta real, reemplazar solo los valores
+ * 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.
+ */
+
+[data-theme='divemotor-star'] {
+  --kf-color-primary: #0c3b75;
+  --kf-color-primary-hover: #0a2f5e;
+  --kf-color-primary-active: #072347;
+  --kf-color-primary-soft: #e8f0fd;
+
+  --kf-color-secondary: #c8102e;
+  --kf-color-secondary-hover: #a80d26;
+  --kf-color-secondary-soft: #fdecef;
+}

package/src/tokens/themes/divemotor.css

@@ -0,0 +1,25 @@
+/*
+ * Tema "divemotor" — marca real, validada.
+ *
+ * Fuente: design system oficial de Divemotor (tokens/colors.css,
+ * divemotor-color-tokens.json). Usado por Portal LATAM, Portal OTD y
+ * Portal Star del ecosistema base — no requiere el ERP de Asistencia en
+ * Ruta para aplicarse.
+ *
+ * Coincide en valor con el tema "default" (ver themes/default.css) porque
+ * hoy Divemotor ES la marca principal del ecosistema. Se mantiene como
+ * archivo separado para que un cliente nuevo sin paleta confirmada nunca
+ * caiga por accidente en la marca de Divemotor — cae en "default", que es
+ * un fallback neutro documentado como tal.
+ */
+
+[data-theme='divemotor'] {
+  --kf-color-primary: #0066cc;
+  --kf-color-primary-hover: #0b5fff;
+  --kf-color-primary-active: #004f9e;
+  --kf-color-primary-soft: #e8f2ff;
+
+  --kf-color-secondary: #e6750c;
+  --kf-color-secondary-hover: #c4650a;
+  --kf-color-secondary-soft: #fff0e3;
+}

package/src/tokens/themes/kaufmann-ar.css

@@ -0,0 +1,25 @@
+/*
+ * Tema "kaufmann-ar" — división Asistencia Remota Kaufmann del ERP de
+ * Asistencia en Ruta y Terreno (Chile).
+ *
+ * ⚠️ REFERENCIAL, NO VALIDADO. Fuente: "Presentación_ERP_Asistencia_Terreno_v2.pdf",
+ * página 6, nota al pie: "Paletas referenciales construidas a partir de la
+ * identidad pública de cada sitio — validar los valores exactos con
+ * Marketing antes de la implementación."
+ *
+ * Cuando Marketing confirme la paleta real, reemplazar solo los valores
+ * 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.
+ */
+
+[data-theme='kaufmann-ar'] {
+  --kf-color-primary: #0c2f52;
+  --kf-color-primary-hover: #092743;
+  --kf-color-primary-active: #061c33;
+  --kf-color-primary-soft: #e8f0fd;
+
+  --kf-color-secondary: #1a5fd0;
+  --kf-color-secondary-hover: #164fac;
+  --kf-color-secondary-soft: #e8f0fd;
+}