@mpf-sde/design-system 0.1.0

package/contract/design-system.json

@@ -0,0 +1,601 @@
+{
+  "schemaVersion": "1.0.0",
+  "id": "mpf-sde-design-system",
+  "name": "Design System MPF",
+  "package": "@mpf-sde/design-system",
+  "version": "0.1.0",
+  "sourceOfTruth": "code",
+  "tokens": {
+    "borders": [
+      [
+        "border-width-hairline",
+        "1px",
+        "Lineas divisorias, contornos de cards y separadores sutiles"
+      ],
+      [
+        "border-width-focus",
+        "2px",
+        "Anillo de foco visible y estados de teclado"
+      ],
+      [
+        "border-style-default",
+        "solid",
+        "Bordes institucionales sin ornamentacion"
+      ],
+      [
+        "border-color-subtle",
+        "rgba(0, 6, 46, 0.12)",
+        "Contornos en superficies claras"
+      ],
+      [
+        "border-color-strong",
+        "rgba(28, 32, 36, 0.24)",
+        "Bordes con mayor contraste en controles o tablas"
+      ],
+      [
+        "border-color-inverse",
+        "rgba(255, 255, 255, 0.16)",
+        "Contornos sobre superficies oscuras"
+      ]
+    ],
+    "breakpoints": [
+      [
+        "breakpoint-xs",
+        "360px",
+        "Telefonos angostos"
+      ],
+      [
+        "breakpoint-sm",
+        "640px",
+        "Telefonos grandes y layouts compactos"
+      ],
+      [
+        "breakpoint-md",
+        "768px",
+        "Tablets y cambios de una a dos columnas"
+      ],
+      [
+        "breakpoint-lg",
+        "1024px",
+        "Desktop inicial y navegacion completa"
+      ],
+      [
+        "breakpoint-xl",
+        "1280px",
+        "Desktop amplio"
+      ],
+      [
+        "breakpoint-2xl",
+        "1536px",
+        "Pantallas institucionales o monitores grandes"
+      ]
+    ],
+    "colors": [
+      {
+        "name": "Azul Noche",
+        "token": "--mpf-blue-950",
+        "value": "#101821",
+        "usage": "Bloques oscuros, asistente virtual, footer y superficies de alto contraste."
+      },
+      {
+        "name": "Azul Institucional",
+        "token": "--mpf-blue-700",
+        "value": "#155a8f",
+        "usage": "Estructura de marca, enlaces importantes y estados activos."
+      },
+      {
+        "name": "Celeste",
+        "token": "--mpf-blue-400",
+        "value": "#76AADC",
+        "usage": "Iconos, micro-accentos y senales informativas digitales."
+      },
+      {
+        "name": "Azul Suave",
+        "token": "--mpf-blue-100",
+        "value": "#e6f4fe",
+        "usage": "Fondos informativos, chips y estados de seleccion suaves."
+      },
+      {
+        "name": "Rojo MPF",
+        "token": "--mpf-red-600",
+        "value": "#D3100E",
+        "usage": "Acento editorial, palabras destacadas, alertas suaves y llamadas sensibles."
+      },
+      {
+        "name": "Rojo Profundo",
+        "token": "--mpf-red-800",
+        "value": "#a52a32",
+        "usage": "Hover, estados criticos y contraste rojo sobre fondos claros."
+      },
+      {
+        "name": "Marfil",
+        "token": "--mpf-ivory",
+        "value": "#faf8f3",
+        "usage": "Fondo principal del sitio y textura institucional."
+      },
+      {
+        "name": "Papel",
+        "token": "--mpf-paper",
+        "value": "#faf8f5",
+        "usage": "Tarjetas, paneles y areas de lectura."
+      },
+      {
+        "name": "Tinta",
+        "token": "--mpf-ink",
+        "value": "#1c2024",
+        "usage": "Texto principal, encabezados UI y lineas fuertes."
+      },
+      {
+        "name": "Texto Medio",
+        "token": "--mpf-muted",
+        "value": "#60646c",
+        "usage": "Bajadas, metadatos, notas y contenido secundario."
+      }
+    ],
+    "components": [
+      {
+        "id": "button",
+        "name": "Button",
+        "category": "actions",
+        "variants": {
+          "appearance": [
+            "solid",
+            "soft",
+            "outline",
+            "ghost"
+          ],
+          "color": [
+            "neutral",
+            "blue",
+            "red",
+            "green"
+          ],
+          "size": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "icon": [
+            "none",
+            "leading",
+            "trailing",
+            "both"
+          ],
+          "state": [
+            "default",
+            "hover",
+            "pressed",
+            "disabled",
+            "loading"
+          ]
+        },
+        "rules": [
+          "La variante default usa fondo oscuro en light mode y fondo claro en dark mode.",
+          "Los botones pueden recibir icono inicial, final, ambos o ninguno.",
+          "Los botones icon-only requieren aria-label.",
+          "El foco visible es obligatorio."
+        ]
+      },
+      {
+        "id": "card",
+        "name": "Card",
+        "category": "surface",
+        "variants": [
+          "simple",
+          "informative",
+          "dark",
+          "action",
+          "news",
+          "compact-media"
+        ],
+        "rules": [
+          "Radio maximo recomendado: 8px.",
+          "No anidar cards como estructura visual.",
+          "Las cards oscuras se reservan para herramientas o acciones prioritarias.",
+          "En dark mode, las action cards usan superficies grises oscuras y la primera puede ser inversa."
+        ]
+      },
+      {
+        "id": "list",
+        "name": "List",
+        "category": "data-display",
+        "variants": [
+          "action-list",
+          "data-list",
+          "editorial-list"
+        ],
+        "rules": [
+          "Las listas tabulares mantienen columnas estables.",
+          "Cuando el contenido excede el ancho disponible, el cuerpo funciona como carril horizontal.",
+          "No comprimir texto hasta romper palabras o columnas.",
+          "Las acciones de fila deben ser accesibles por teclado."
+        ]
+      },
+      {
+        "id": "icon",
+        "name": "Icon",
+        "category": "asset",
+        "variants": [
+          "ui-lineal",
+          "editorial-pictogram",
+          "brand-social",
+          "svg-asset"
+        ],
+        "rules": [
+          "La decision canonica es el uso, estilo visual, nombre semantico y SVG aprobado.",
+          "Las librerias de iconos son herramientas de seleccion o adaptadores por plataforma, no fuente de verdad.",
+          "Todo icono aprobado se suma al set inicial y queda disponible como SVG portable."
+        ]
+      }
+    ],
+    "elevation": [
+      [
+        "Hairline",
+        "1px solid rgba(0, 6, 46, 0.14)",
+        "Bordes sutiles con lectura clara"
+      ],
+      [
+        "Card",
+        "0 10px 30px rgba(16, 24, 33, 0.08)",
+        "Tarjetas y paneles claros"
+      ],
+      [
+        "Float",
+        "0 24px 70px rgba(16, 24, 33, 0.14)",
+        "Mapa, asistente, overlays y bloques destacados"
+      ],
+      [
+        "Dark inset",
+        "inset 0 1px rgba(255,255,255,0.08)",
+        "Paneles azul noche"
+      ]
+    ],
+    "images": [
+      {
+        "id": "institutional-hero",
+        "name": "Imagen hero institucional",
+        "aspectRatio": "16 / 9",
+        "radius": "var(--radius-5)",
+        "fit": "cover",
+        "usage": "Imagen principal de edificios, autoridades o escenas institucionales con alta jerarquia.",
+        "rules": [
+          "Usar imagen real o institucional aprobada.",
+          "Evitar recortes que oculten informacion importante.",
+          "Mantener contraste suficiente si hay texto superpuesto.",
+          "No aplicar blur decorativo ni gradientes."
+        ]
+      },
+      {
+        "id": "editorial-card",
+        "name": "Imagen editorial de card",
+        "aspectRatio": "4 / 3",
+        "radius": "var(--radius-4)",
+        "fit": "cover",
+        "usage": "Noticias, publicaciones, novedades y contenido editorial.",
+        "rules": [
+          "Mantener encuadre reconocible.",
+          "No oscurecer por defecto.",
+          "Usar radios bajos y borde sutil cuando conviva con cards."
+        ]
+      },
+      {
+        "id": "avatar-authority",
+        "name": "Retrato institucional",
+        "aspectRatio": "3 / 4",
+        "radius": "var(--radius-4)",
+        "fit": "cover",
+        "usage": "Autoridades, perfiles institucionales y responsables de area.",
+        "rules": [
+          "Priorizar fondos sobrios y buena iluminacion.",
+          "No usar recortes circulares salvo necesidad funcional.",
+          "Mantener consistencia de altura en grillas."
+        ]
+      },
+      {
+        "id": "map-panel",
+        "name": "Imagen o mapa territorial",
+        "aspectRatio": "1 / 1",
+        "radius": "var(--radius-4)",
+        "fit": "contain",
+        "usage": "Mapas, diagramas territoriales, organigramas o piezas informativas.",
+        "rules": [
+          "No deformar la pieza.",
+          "Usar fondo claro o marfil para lectura.",
+          "Permitir scroll o zoom cuando el contenido supere el contenedor."
+        ]
+      }
+    ],
+    "motion": [
+      [
+        "duration-instant",
+        "80ms",
+        "Feedback minimo en controles simples"
+      ],
+      [
+        "duration-fast",
+        "140ms",
+        "Hover, focus y pequenos cambios de estado"
+      ],
+      [
+        "duration-base",
+        "220ms",
+        "Transiciones de paneles, menus y superficies"
+      ],
+      [
+        "duration-slow",
+        "320ms",
+        "Entradas o cambios de contexto con mayor presencia"
+      ],
+      [
+        "easing-standard",
+        "cubic-bezier(0.2, 0, 0, 1)",
+        "Movimiento funcional por defecto"
+      ],
+      [
+        "easing-exit",
+        "cubic-bezier(0.4, 0, 1, 1)",
+        "Salida o cierre de elementos"
+      ],
+      [
+        "easing-emphasis",
+        "cubic-bezier(0.16, 1, 0.3, 1)",
+        "Transiciones editoriales puntuales"
+      ]
+    ],
+    "opacity": [
+      [
+        "opacity-disabled",
+        "0.44",
+        "Controles deshabilitados conservando legibilidad"
+      ],
+      [
+        "opacity-muted",
+        "0.68",
+        "Texto secundario sobre superficies oscuras"
+      ],
+      [
+        "opacity-overlay-light",
+        "0.72",
+        "Capas claras sobre textura institucional"
+      ],
+      [
+        "opacity-overlay-dark",
+        "0.82",
+        "Capas oscuras para preservar contraste"
+      ],
+      [
+        "opacity-scrim",
+        "0.56",
+        "Fondos de modales o overlays"
+      ]
+    ],
+    "radii": [
+      [
+        "1",
+        "3px",
+        "Badges y detalles pequenos"
+      ],
+      [
+        "2",
+        "4px",
+        "Inputs densos y mini-controles"
+      ],
+      [
+        "3",
+        "6px",
+        "Botones y controles base"
+      ],
+      [
+        "4",
+        "8px",
+        "Cards, paneles y superficies"
+      ],
+      [
+        "5",
+        "16px",
+        "Elementos destacados o imagenes cuando lo pidan"
+      ]
+    ],
+    "sizing": [
+      [
+        "size-icon-xs",
+        "16px",
+        "Iconos pequenos en metadata y controles densos"
+      ],
+      [
+        "size-icon-sm",
+        "20px",
+        "Iconos de botones, inputs y navegacion compacta"
+      ],
+      [
+        "size-icon-md",
+        "24px",
+        "Iconos base de UI y acciones recurrentes"
+      ],
+      [
+        "size-icon-lg",
+        "32px",
+        "Iconos destacados en cards o accesos"
+      ],
+      [
+        "size-control-sm",
+        "32px",
+        "Altura minima de controles compactos"
+      ],
+      [
+        "size-control-md",
+        "40px",
+        "Altura base de botones, inputs y selects"
+      ],
+      [
+        "size-control-lg",
+        "48px",
+        "Controles destacados o tactiles"
+      ],
+      [
+        "size-container-readable",
+        "720px",
+        "Ancho maximo para lectura editorial"
+      ],
+      [
+        "size-container-page",
+        "1180px",
+        "Ancho maximo de grillas y contenido principal"
+      ],
+      [
+        "size-container-wide",
+        "1440px",
+        "Ancho maximo para composiciones institucionales amplias"
+      ]
+    ],
+    "spacing": [
+      [
+        "1",
+        "4px",
+        "Detalles, hairline offsets"
+      ],
+      [
+        "2",
+        "8px",
+        "Icono/texto, separaciones densas"
+      ],
+      [
+        "3",
+        "12px",
+        "Controles compactos"
+      ],
+      [
+        "4",
+        "16px",
+        "Padding base y gaps de formularios"
+      ],
+      [
+        "5",
+        "24px",
+        "Grupos de contenido"
+      ],
+      [
+        "6",
+        "32px",
+        "Cards amplias y bloques internos"
+      ],
+      [
+        "7",
+        "40px",
+        "Separacion entre modulos pequenos"
+      ],
+      [
+        "8",
+        "48px",
+        "Bandas compactas"
+      ],
+      [
+        "9",
+        "64px",
+        "Secciones principales"
+      ],
+      [
+        "10",
+        "80px",
+        "Respiracion editorial"
+      ],
+      [
+        "11",
+        "96px",
+        "Separacion mayor entre bloques"
+      ]
+    ],
+    "typography": [
+      [
+        "Display",
+        "clamp(4.75rem, 8vw, 7.5rem)",
+        "0.93",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H1",
+        "clamp(3.5rem, 6vw, 5.5rem)",
+        "0.95",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H2",
+        "clamp(2.5rem, 4vw, 4rem)",
+        "1.00",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H3",
+        "2rem",
+        "1.08",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H4",
+        "1.5rem",
+        "1.12",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H5",
+        "1.25rem",
+        "1.16",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "H6",
+        "1rem",
+        "1.20",
+        "-0.04em",
+        "DM Sans SemiBold"
+      ],
+      [
+        "Lead",
+        "1.5rem",
+        "1.45",
+        "0",
+        "Source Sans Pro Regular"
+      ],
+      [
+        "Body",
+        "1rem",
+        "1.65",
+        "-0.01em",
+        "Source Sans Pro Regular"
+      ],
+      [
+        "UI",
+        "0.9375rem",
+        "1.45",
+        "0",
+        "DM Sans SemiBold"
+      ],
+      [
+        "Data label",
+        "0.75rem",
+        "1.35",
+        "0.14em",
+        "JetBrains Mono"
+      ]
+    ]
+  },
+  "assets": {
+    "brand": "brand/",
+    "fonts": "fonts/",
+    "icons": "icons/",
+    "images": "images/"
+  },
+  "exports": {
+    "css": "./css/index.css",
+    "tokens": "./tokens/index.json",
+    "contract": "./contract/design-system.json",
+    "markdown": "./contract/design-system.md",
+    "wordpressThemeJson": "./wordpress/theme.json"
+  }
+}

package/contract/design-system.md

@@ -0,0 +1,30 @@
+# Design System MPF
+
+Version: 0.1.0
+
+## Instalacion
+
+```bash
+npm install @mpf-sde/design-system
+```
+
+## CSS
+
+```ts
+import "@mpf-sde/design-system/css";
+```
+
+## Tokens De Color
+
+| Token |Valor |Uso |
+| --- | --- | --- |
+| --mpf-blue-950 | #101821 | Bloques oscuros, asistente virtual, footer y superficies de alto contraste. |
+| --mpf-blue-700 | #155a8f | Estructura de marca, enlaces importantes y estados activos. |
+| --mpf-blue-400 | #76AADC | Iconos, micro-accentos y senales informativas digitales. |
+| --mpf-blue-100 | #e6f4fe | Fondos informativos, chips y estados de seleccion suaves. |
+| --mpf-red-600 | #D3100E | Acento editorial, palabras destacadas, alertas suaves y llamadas sensibles. |
+| --mpf-red-800 | #a52a32 | Hover, estados criticos y contraste rojo sobre fondos claros. |
+| --mpf-ivory | #faf8f3 | Fondo principal del sitio y textura institucional. |
+| --mpf-paper | #faf8f5 | Tarjetas, paneles y areas de lectura. |
+| --mpf-ink | #1c2024 | Texto principal, encabezados UI y lineas fuertes. |
+| --mpf-muted | #60646c | Bajadas, metadatos, notas y contenido secundario. |

package/css/fonts.css

@@ -0,0 +1,80 @@
+@font-face {
+  font-family: "DM Sans";
+  src: url("../fonts/dm-sans/dm-sans-latin-400-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("../fonts/dm-sans/dm-sans-latin-500-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("../fonts/dm-sans/dm-sans-latin-600-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("../fonts/dm-sans/dm-sans-latin-700-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/source-sans-pro/source-sans-pro-latin-400-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/source-sans-pro/source-sans-pro-latin-600-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/source-sans-pro/source-sans-pro-latin-700-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+}
+