desy-html 16.0.3 → 17.0.0

package/docs/ds/_ds.section.botones.njk

@@ -1,53 +1,53 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Botones"
-  }) }}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones por defecto"
-    }) }}
-  {% include "ds/_ds.example.botones-default.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones primarios"
-    }) }}
-  {% include "ds/_ds.example.botones-primary.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones transparentes"
-    }) }}
-  {% include "ds/_ds.example.botones-transparent.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones alerta"
-    }) }}
-  {% include "ds/_ds.example.botones-alert.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones pequeños por defecto"
-    }) }}
-  {% include "ds/_ds.example.botones-default-sm.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones pequeños primarios"
-    }) }}
-  {% include "ds/_ds.example.botones-primary-sm.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones pequeños transparentes"
-    }) }}
-  {% include "ds/_ds.example.botones-transparent-sm.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones pequeños alerta"
-    }) }}
-  {% include "ds/_ds.example.botones-alert-sm.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Botones grandes primarios"
-    }) }}
-  {% include "ds/_ds.example.botones-primary-lg.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Botones"
+  }) }}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones por defecto"
+    }) }}
+  {% include "ds/_ds.example.botones-default.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones primarios"
+    }) }}
+  {% include "ds/_ds.example.botones-primary.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones transparentes"
+    }) }}
+  {% include "ds/_ds.example.botones-transparent.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones alerta"
+    }) }}
+  {% include "ds/_ds.example.botones-alert.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones pequeños por defecto"
+    }) }}
+  {% include "ds/_ds.example.botones-default-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones pequeños primarios"
+    }) }}
+  {% include "ds/_ds.example.botones-primary-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones pequeños transparentes"
+    }) }}
+  {% include "ds/_ds.example.botones-transparent-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones pequeños alerta"
+    }) }}
+  {% include "ds/_ds.example.botones-alert-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones grandes primarios"
+    }) }}
+  {% include "ds/_ds.example.botones-primary-lg.njk" %}
+</div>

package/docs/ds/_ds.section.campo-y-area-de-texto.njk

@@ -1,19 +1,19 @@
-
-<!--  _ds.section.campo-y-area-de-texto.njk -->
-
-<div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Campo y área de texto"
-  }) }}
-  <div class="pb-lg"></div>
-  <p class="c-paragraph-base">Utiliza una dimensión del campo aproximada a la longitud del texto que quieres recoger. Incluye una descripción solo si sea necesaria. Utiliza placeholder solo cuando haya que utilizar un formato concreto. </p>
-  <div class="pb-lg"></div>
-  <div class="lg:w-1/2">
-    {% include "ds/_ds.example.forms.njk" %}
-  </div>
-  <div class="my-lg">
-    {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.forms.njk") }}
-  </div>
-</div>
+
+<!--  _ds.section.campo-y-area-de-texto.njk -->
+
+<div class="container mx-auto">
+  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+  {{ DSSectionTitle({
+    title: "Campo y área de texto"
+  }) }}
+  <div class="pb-lg"></div>
+  <p class="c-paragraph-base">Utiliza una dimensión del campo aproximada a la longitud del texto que quieres recoger. Incluye una descripción solo si sea necesaria. Utiliza placeholder solo cuando haya que utilizar un formato concreto. </p>
+  <div class="pb-lg"></div>
+  <div class="lg:w-1/2">
+    {% include "ds/_ds.example.forms.njk" %}
+  </div>
+  <div class="my-lg">
+    {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
+    {{ DSCodeSnippet("ds/_ds.example.forms.njk") }}
+  </div>
+</div>

package/docs/ds/_ds.section.color.njk

@@ -1,147 +1,147 @@
-
-<!--  _ds.section.color.njk -->
-
-<div class="container mx-auto">
-  
-  <div class="grid lg:grid-cols-4 grid-rows-12 gap-base">
-
-    {# 1 #}
-    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center">Interacción</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-primary-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-light</dt><dd>#d6eaf0</dd></dl></div>
-    <div class="flex inset-0 bg-primary-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-base</dt><dd>#00607a</dd></dl></div>
-    <div class="flex inset-0 bg-primary-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-dark</dt><dd>#00475C</dd></dl></div>
-
-    {# 2 #}
-    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm lg:row-span-4 h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center">Soporte</p>
-      </div>
-    </div>
-
-    <div class="flex inset-0 bg-warning-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-light</dt><dd>#fef6b2</dd></dl></div>
-    <div class="flex inset-0 bg-warning-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-base</dt><dd>#fdcb33</dd></dl></div>
-    <div class="flex inset-0 bg-warning-dark font-semibold  text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-dark</dt><dd>#b88e12</dd></dl></div>
-
-    <div class="flex inset-0 bg-success-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-light</dt><dd>#dcf8e2</dd></dl></div>
-    <div class="flex inset-0 bg-success-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-base</dt><dd>#24d14c</dd></dl></div>
-    <div class="flex inset-0 bg-success-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-dark</dt><dd>#1aa23a</dd></dl></div>
-
-    <div class="flex inset-0 bg-info-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-light</dt><dd>#feebcc</dd></dl></div>
-    <div class="flex inset-0 bg-info-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-base</dt><dd>#fa9902</dd></dl></div>
-    <div class="flex inset-0 bg-info-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-dark</dt><dd>#c97a00</dd></dl></div>
-
-    <div class="flex inset-0 bg-alert-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-light</dt><dd>#fbd3ce</dd></dl></div>
-    <div class="flex inset-0 bg-alert-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-base</dt><dd>#d22333</dd></dl></div>
-    <div class="flex inset-0 bg-alert-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-dark</dt><dd>#a40014</dd></dl></div>
-
-    {# 3 #}
-    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center">Fondo</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">white</dt><dd>#ffffff</dd></dl></div>
-    <div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-lighter</dt><dd>#f6f6f5</dd></dl></div>
-    <div class="flex inset-0 bg-neutral-light text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-light</dt><dd>#ededec</dd></dl></div>
-
-    {# 4 #}
-    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center">Contenido</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-base</dt><dd>#92949b</dd></dl></div>
-    <div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-dark</dt><dd>#5e616b</dd></dl></div>
-    <div class="flex inset-0 bg-black font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">black</dt><dd>#1f2331</dd></dl></div>
-
-    {# 5 #}
-    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center">Cabecera</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-base</dt><dd>#2d495f</dd></dl></div>
-    <div class="flex inset-0 bg-heading-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-dark</dt><dd>#21384b</dd></dl></div>
-    <div></div>
-
-    {# 6 #}
-    <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center ">Para gráficas</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>A</dt><dd>#819eae</dd></dl></div>
-    <div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>B</dt><dd>#aa3c2b</dd></dl></div>
-    <div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>C</dt><dd>#819eae</dd></dl></div>
-    <div class="flex inset-0 bg-primary-base font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>D</dt><dd>#00607a</dd></dl></div>
-    <div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>E</dt><dd>#013c53</dd></dl></div>
-    <div></div>
-
-    {# 6 #}
-    <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded-sm h-full">
-      <div class="w-full">
-        <p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
-      </div>
-    </div>
-    <div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>F</dt><dd>#ffdc00</dd></dl></div>
-    <div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>G</dt><dd>#ffaa00</dd></dl></div>
-    <div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>H</dt><dd>#ed020d</dd></dl></div>
-    <div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>I</dt><dd>#646464</dd></dl></div>
-    <div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>J</dt><dd>#e1e1e1</dd></dl></div>
-    <div></div>
-  </div>
-
-  <div class="pb-xl"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Border"
-  }) }}
-  <p class="mb-8">Utiliza línea sólida con grosor 1px en black o neutral-base.</p>
-  {% include "ds/_ds.example.border.njk" %}
-  <div class="pb-xl"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Accesibilidad de los colores"
-  }) }}
-  <p class="mb-base">El contraste de color entre el texto y los elementos interactivos debe cumplir el mínimo AA de WCAG para herramientas internas del gobierno y AAA para herramientas a las que tenga acceso la ciudadanía.</p>
-  <p class="mb-base">El texto sobre masa de color en principio solo se usa en los botones principales, pero en caso de usarse, el peso de fuente debe ser Semibold y un tamaño mínimo de texto de 16px.</p>
-  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-lg">
-    <div class="p-4 bg-primary-base font-semibold text-white">
-      Texto
-    </div>
-    <div class="p-4 bg-warning-base font-semibold text-black">
-      Texto
-    </div>
-    <div class="p-4 bg-success-base font-semibold text-black">
-      Texto
-    </div>
-    <div class="p-4 bg-info-base font-semibold text-black">
-      Texto
-    </div>
-    <div class="p-4 bg-alert-base font-semibold text-white">
-      Texto
-    </div>
-  </div>
-  <p class="mb-base">En los mensajes destacados utiliza los colores claros con texto negro.</p>
-  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-base">
-    <div class="p-4 bg-primary-light">
-      Texto
-    </div>
-    <div class="p-4 bg-warning-light">
-      Texto
-    </div>
-    <div class="p-4 bg-success-light">
-      Texto
-    </div>
-    <div class="p-4 bg-info-light">
-      Texto
-    </div>
-    <div class="p-4 bg-alert-light">
-      Texto
-    </div>
-  </div>
-</div>
+
+<!--  _ds.section.color.njk -->
+
+<div class="container mx-auto">
+  
+  <div class="grid lg:grid-cols-4 grid-rows-12 gap-base">
+
+    {# 1 #}
+    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center">Interacción</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-primary-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-light</dt><dd>#d6eaf0</dd></dl></div>
+    <div class="flex inset-0 bg-primary-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-base</dt><dd>#00607a</dd></dl></div>
+    <div class="flex inset-0 bg-primary-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-dark</dt><dd>#00475C</dd></dl></div>
+
+    {# 2 #}
+    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm lg:row-span-4 h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center">Soporte</p>
+      </div>
+    </div>
+
+    <div class="flex inset-0 bg-warning-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-light</dt><dd>#fef6b2</dd></dl></div>
+    <div class="flex inset-0 bg-warning-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-base</dt><dd>#fdcb33</dd></dl></div>
+    <div class="flex inset-0 bg-warning-dark font-semibold  text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-dark</dt><dd>#b88e12</dd></dl></div>
+
+    <div class="flex inset-0 bg-success-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-light</dt><dd>#dcf8e2</dd></dl></div>
+    <div class="flex inset-0 bg-success-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-base</dt><dd>#24d14c</dd></dl></div>
+    <div class="flex inset-0 bg-success-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-dark</dt><dd>#1aa23a</dd></dl></div>
+
+    <div class="flex inset-0 bg-info-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-light</dt><dd>#feebcc</dd></dl></div>
+    <div class="flex inset-0 bg-info-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-base</dt><dd>#fa9902</dd></dl></div>
+    <div class="flex inset-0 bg-info-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-dark</dt><dd>#c97a00</dd></dl></div>
+
+    <div class="flex inset-0 bg-alert-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-light</dt><dd>#fbd3ce</dd></dl></div>
+    <div class="flex inset-0 bg-alert-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-base</dt><dd>#d22333</dd></dl></div>
+    <div class="flex inset-0 bg-alert-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-dark</dt><dd>#a40014</dd></dl></div>
+
+    {# 3 #}
+    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center">Fondo</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">white</dt><dd>#ffffff</dd></dl></div>
+    <div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-lighter</dt><dd>#f6f6f5</dd></dl></div>
+    <div class="flex inset-0 bg-neutral-light text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-light</dt><dd>#ededec</dd></dl></div>
+
+    {# 4 #}
+    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center">Contenido</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-base</dt><dd>#92949b</dd></dl></div>
+    <div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-dark</dt><dd>#5e616b</dd></dl></div>
+    <div class="flex inset-0 bg-black font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">black</dt><dd>#1f2331</dd></dl></div>
+
+    {# 5 #}
+    <div class="self-center flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center">Cabecera</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-base</dt><dd>#2d495f</dd></dl></div>
+    <div class="flex inset-0 bg-heading-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-dark</dt><dd>#21384b</dd></dl></div>
+    <div></div>
+
+    {# 6 #}
+    <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center ">Para gráficas</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>A</dt><dd>#819eae</dd></dl></div>
+    <div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>B</dt><dd>#aa3c2b</dd></dl></div>
+    <div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>C</dt><dd>#819eae</dd></dl></div>
+    <div class="flex inset-0 bg-primary-base font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>D</dt><dd>#00607a</dd></dl></div>
+    <div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>E</dt><dd>#013c53</dd></dl></div>
+    <div></div>
+
+    {# 6 #}
+    <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded-sm h-full">
+      <div class="w-full">
+        <p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
+      </div>
+    </div>
+    <div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>F</dt><dd>#ffdc00</dd></dl></div>
+    <div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>G</dt><dd>#ffaa00</dd></dl></div>
+    <div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>H</dt><dd>#ed020d</dd></dl></div>
+    <div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>I</dt><dd>#646464</dd></dl></div>
+    <div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>J</dt><dd>#e1e1e1</dd></dl></div>
+    <div></div>
+  </div>
+
+  <div class="pb-xl"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Border"
+  }) }}
+  <p class="mb-8">Utiliza línea sólida con grosor 1px en black o neutral-base.</p>
+  {% include "ds/_ds.example.border.njk" %}
+  <div class="pb-xl"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Accesibilidad de los colores"
+  }) }}
+  <p class="mb-base">El contraste de color entre el texto y los elementos interactivos debe cumplir el mínimo AA de WCAG para herramientas internas del gobierno y AAA para herramientas a las que tenga acceso la ciudadanía.</p>
+  <p class="mb-base">El texto sobre masa de color en principio solo se usa en los botones principales, pero en caso de usarse, el peso de fuente debe ser Semibold y un tamaño mínimo de texto de 16px.</p>
+  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-lg">
+    <div class="p-4 bg-primary-base font-semibold text-white">
+      Texto
+    </div>
+    <div class="p-4 bg-warning-base font-semibold text-black">
+      Texto
+    </div>
+    <div class="p-4 bg-success-base font-semibold text-black">
+      Texto
+    </div>
+    <div class="p-4 bg-info-base font-semibold text-black">
+      Texto
+    </div>
+    <div class="p-4 bg-alert-base font-semibold text-white">
+      Texto
+    </div>
+  </div>
+  <p class="mb-base">En los mensajes destacados utiliza los colores claros con texto negro.</p>
+  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-base">
+    <div class="p-4 bg-primary-light">
+      Texto
+    </div>
+    <div class="p-4 bg-warning-light">
+      Texto
+    </div>
+    <div class="p-4 bg-success-light">
+      Texto
+    </div>
+    <div class="p-4 bg-info-light">
+      Texto
+    </div>
+    <div class="p-4 bg-alert-light">
+      Texto
+    </div>
+  </div>
+</div>

package/docs/ds/_ds.section.datos.njk

@@ -1,43 +1,43 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Datos"
-  }) }}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Pills"
-    }) }}
-  {% include "ds/_ds.example.pills.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Description list"
-    }) }}
-  {% include "ds/_ds.example.description-list.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Status"
-    }) }}
-  {% include "ds/_ds.example.status.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Status items"
-    }) }}
-  {% include "ds/_ds.example.status-item.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Items"
-    }) }}
-  {% include "ds/_ds.example.item.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Tablas"
-    }) }}
-  {% include "ds/_ds.example.table.njk" %}
-  <div class="pb-xl"></div>
-    {{ DSSubsectionTitle({
-      title: "Tabla con árbol"
-    }) }}
-  {% include "ds/_ds.example.treegrid.njk" %}
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Datos"
+  }) }}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Pills"
+    }) }}
+  {% include "ds/_ds.example.pills.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Description list"
+    }) }}
+  {% include "ds/_ds.example.description-list.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Status"
+    }) }}
+  {% include "ds/_ds.example.status.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Status items"
+    }) }}
+  {% include "ds/_ds.example.status-item.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Items"
+    }) }}
+  {% include "ds/_ds.example.item.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Tablas"
+    }) }}
+  {% include "ds/_ds.example.table.njk" %}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Tabla con árbol"
+    }) }}
+  {% include "ds/_ds.example.treegrid.njk" %}
 </div>

package/docs/ds/_ds.section.dropdowns.njk

@@ -1,23 +1,23 @@
-{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-
-<div class="container mx-auto">
-  {{ DSSectionTitle({
-    title: "Dropdowns"
-  }) }}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Dropdowns por defecto"
-    }) }}
-  {% include "ds/_ds.example.dropdowns-default.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Dropdowns variaciones"
-    }) }}
-  {% include "ds/_ds.example.dropdowns-variaciones.njk" %}
-  <div class="pb-lg"></div>
-    {{ DSSubsectionTitle({
-      title: "Dropdowns en uso"
-    }) }}
-  {% include "ds/_ds.example.dropdowns-en-uso.njk" %}
-</div>
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Dropdowns"
+  }) }}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Dropdowns por defecto"
+    }) }}
+  {% include "ds/_ds.example.dropdowns-default.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Dropdowns variaciones"
+    }) }}
+  {% include "ds/_ds.example.dropdowns-variaciones.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Dropdowns en uso"
+    }) }}
+  {% include "ds/_ds.example.dropdowns-en-uso.njk" %}
+</div>