@mpf-sde/design-system 0.1.0

package/tokens/source/components.json

@@ -0,0 +1,55 @@
+[
+  {
+    "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."
+    ]
+  }
+]

package/tokens/source/elevation.json

@@ -0,0 +1,6 @@
+[
+  ["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"]
+]

package/tokens/source/images.json

@@ -0,0 +1,55 @@
+[
+  {
+    "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."
+    ]
+  }
+]

package/tokens/source/motion.json

@@ -0,0 +1,9 @@
+[
+  ["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"]
+]

package/tokens/source/opacity.json

@@ -0,0 +1,7 @@
+[
+  ["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"]
+]

package/tokens/source/radii.json

@@ -0,0 +1,7 @@
+[
+  ["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"]
+]

package/tokens/source/sizing.json

@@ -0,0 +1,12 @@
+[
+  ["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"]
+]

package/tokens/source/spacing.json

@@ -0,0 +1,13 @@
+[
+  ["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"]
+]

package/tokens/source/typography.json

@@ -0,0 +1,13 @@
+[
+  ["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"]
+]

package/wordpress/theme.json

@@ -0,0 +1,137 @@
+{
+  "version": 3,
+  "settings": {
+    "color": {
+      "palette": [
+        {
+          "name": "Azul Noche",
+          "slug": "blue-950",
+          "color": "#101821"
+        },
+        {
+          "name": "Azul Institucional",
+          "slug": "blue-700",
+          "color": "#155a8f"
+        },
+        {
+          "name": "Celeste",
+          "slug": "blue-400",
+          "color": "#76AADC"
+        },
+        {
+          "name": "Azul Suave",
+          "slug": "blue-100",
+          "color": "#e6f4fe"
+        },
+        {
+          "name": "Rojo MPF",
+          "slug": "red-600",
+          "color": "#D3100E"
+        },
+        {
+          "name": "Rojo Profundo",
+          "slug": "red-800",
+          "color": "#a52a32"
+        },
+        {
+          "name": "Marfil",
+          "slug": "ivory",
+          "color": "#faf8f3"
+        },
+        {
+          "name": "Papel",
+          "slug": "paper",
+          "color": "#faf8f5"
+        },
+        {
+          "name": "Tinta",
+          "slug": "ink",
+          "color": "#1c2024"
+        },
+        {
+          "name": "Texto Medio",
+          "slug": "muted",
+          "color": "#60646c"
+        }
+      ]
+    },
+    "typography": {
+      "fontFamilies": [
+        {
+          "name": "DM Sans",
+          "slug": "dm-sans",
+          "fontFamily": "DM Sans"
+        },
+        {
+          "name": "Source Sans Pro",
+          "slug": "source-sans-pro",
+          "fontFamily": "Source Sans Pro"
+        },
+        {
+          "name": "JetBrains Mono",
+          "slug": "jetbrains-mono",
+          "fontFamily": "JetBrains Mono"
+        }
+      ]
+    },
+    "spacing": {
+      "spacingSizes": [
+        {
+          "name": "Detalles, hairline offsets",
+          "slug": "1",
+          "size": "4px"
+        },
+        {
+          "name": "Icono/texto, separaciones densas",
+          "slug": "2",
+          "size": "8px"
+        },
+        {
+          "name": "Controles compactos",
+          "slug": "3",
+          "size": "12px"
+        },
+        {
+          "name": "Padding base y gaps de formularios",
+          "slug": "4",
+          "size": "16px"
+        },
+        {
+          "name": "Grupos de contenido",
+          "slug": "5",
+          "size": "24px"
+        },
+        {
+          "name": "Cards amplias y bloques internos",
+          "slug": "6",
+          "size": "32px"
+        },
+        {
+          "name": "Separacion entre modulos pequenos",
+          "slug": "7",
+          "size": "40px"
+        },
+        {
+          "name": "Bandas compactas",
+          "slug": "8",
+          "size": "48px"
+        },
+        {
+          "name": "Secciones principales",
+          "slug": "9",
+          "size": "64px"
+        },
+        {
+          "name": "Respiracion editorial",
+          "slug": "10",
+          "size": "80px"
+        },
+        {
+          "name": "Separacion mayor entre bloques",
+          "slug": "11",
+          "size": "96px"
+        }
+      ]
+    }
+  }
+}