desy-html 11.0.3 → 11.0.5

package/config/tailwind.config.js

@@ -212,140 +212,7 @@ export const theme = {
     },
   },
 }
-
-const plugin = require('tailwindcss/plugin')
-
 export const plugins = [
   require('@tailwindcss/forms'),
   require('@tailwindcss/typography'),
-  function({ addUtilities, theme }) {
-    addUtilities({
-      '.c-h0': {
-        marginBottom: theme('spacing.8'),
-        fontSize: '2.5rem',
-        fontWeight: theme('fontWeight.bold'),
-        lineHeight: theme('lineHeight.tight'),
-      },
-      '.c-h1': {
-        marginBottom: theme('spacing.lg'),
-        fontSize: theme('fontSize.3xl'),
-        fontWeight: theme('fontWeight.bold'),
-        lineHeight: theme('lineHeight.tight'),
-      },
-      '.c-h2': {
-        marginBottom: theme('spacing.base'),
-        fontSize: theme('fontSize.2xl'),
-        fontWeight: theme('fontWeight.bold'),
-        lineHeight: theme('lineHeight.tight'),
-      },
-      '.c-h3': {
-        marginBottom: theme('spacing.sm'),
-        fontSize: theme('fontSize.lg'),
-        fontWeight: theme('fontWeight.bold'),
-        lineHeight: theme('lineHeight.tight'),
-      },
-      '.c-h4': {
-        marginBottom: theme('spacing.sm'),
-        fontSize: theme('fontSize.base'),
-        fontWeight: theme('fontWeight.bold'),
-        lineHeight: theme('lineHeight.tight'),
-      },
-      '.c-link': {
-        color: theme('colors.primary.base'),
-        textDecoration: 'underline',
-        '&:hover': {
-          color: theme('colors.primary.dark'),
-        },
-        '&:focus': {
-          backgroundColor: theme('colors.warning.base'),
-          boxShadow: theme('boxShadow.outline-focus'),
-          outline: 'none',
-          color: theme('colors.black'),
-        },
-      },
-      '.c-link--alert': {
-        color: theme('colors.alert.base'),
-        textDecoration: 'underline',
-        fontWeight: theme('fontWeight.semibold'),
-        '&:hover': {
-          color: theme('colors.alert.dark'),
-        },
-      },
-      '.c-link--neutral': {
-        color: theme('colors.neutral.dark'),
-        textDecoration: 'underline',
-        '&:hover': {
-          color: theme('colors.black'),
-        },
-      },
-      '.c-link--full': {
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          inset: '0',
-        },
-      },
-      '.c-paragraph-lg': {
-        marginBottom: theme('spacing.lg'),
-        fontSize: theme('fontSize.lg'),
-      },
-      '.c-paragraph-base': {
-        marginBottom: theme('spacing.base'),
-        fontSize: theme('fontSize.base'),
-      },
-      '.c-paragraph-sm': {
-        marginBottom: theme('spacing.sm'),
-        fontSize: theme('fontSize.sm'),
-      },
-      '.c-ul': {
-        marginBottom: theme('spacing.base'),
-        listStyleType: 'none',
-        '& li': {
-          position: 'relative',
-          marginBottom: theme('spacing.base'),
-          paddingLeft: theme('spacing.8'),
-          '&::before': {
-            content: '""',
-            position: 'absolute',
-            top: '0.625rem',
-            left: '0.25rem',
-            width: '0.375rem',
-            height: '0.375rem',
-            backgroundColor: theme('colors.black'),
-            borderRadius: '9999px',
-          },
-          '&:last-of-type': {
-            marginBottom: '0',
-          },
-        },
-      },
-      '.c-ul--no-bullets': {
-        '& li': {
-          paddingLeft: '0',
-          '&::before': {
-            display: 'none',
-          },
-        },
-      },
-      '.c-ol': {
-        marginBottom: theme('spacing.base'),
-        counterReset: 'list-counter',
-        '& li': {
-          position: 'relative',
-          marginBottom: theme('spacing.base'),
-          paddingLeft: theme('spacing.8'),
-          '&::before': {
-            counterIncrement: 'list-counter',
-            content: 'counter(list-counter) "."',
-            position: 'absolute',
-            left: '0.25rem',
-            color: theme('colors.black'),
-          },
-          '&:last-of-type': {
-            marginBottom: '0',
-          },
-        },
-      },
-    })
-  }
 ]

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

@@ -107,111 +107,122 @@
   </ul>
   <div class="pb-2xl"></div>
 
+    {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Enlaces"
+    title: "Párrafos"
   }) }}
   <ul class="divide-y divide-neutral-base">
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
+          <p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
+          <p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
+          <p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
+          <p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
+          <p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
+          <p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
-          <a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
+          <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
         </dd>
       </dl>
     </li>
   </ul>
   <div class="pb-2xl"></div>
 
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Párrafos"
+    title: "Enlaces"
   }) }}
   <ul class="divide-y divide-neutral-base">
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+          <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
+          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+          <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
+          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+          <p >Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+          <p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--neutral</code> - <code>normal</code> - <code>underline</code> - <code>neutral-dark</code> - hover: <code>black</code></p>
         </dd>
       </dl>
     </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
+          <a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
         </dd>
       </dl>
     </li>
   </ul>
   <div class="pb-2xl"></div>
 
+
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Listas"

package/docs/index.html

@@ -38,6 +38,16 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.11.0.5</h3>
+  <ul class="text-sm">
+    <li>Minor fixes in breadcrumbs.</li>
+    <li>Added default font size and line height to body to improve accessibility.</li>
+  </ul>
+  <h3>v.11.0.4</h3>
+  <ul class="text-sm">
+    <li>Fixed previous responsive with Tailwind CSS breakpoint prefixes.</li>
+    <li>Changed footer text size in mobile.</li>
+  </ul>
   <h3>v.11.0.3</h3>
   <ul class="text-sm">
     <li>Text styles are now responsive with Tailwind CSS breakpoint prefixes.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.0.3",
+  "version": "11.0.5",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

package/src/css/base.css

@@ -10,6 +10,8 @@
   body {
     @apply bg-white;
     @apply text-black;
+    @apply text-base;
+    @apply leading-normal;
 
     &.dev {
       @apply bg-repeat;

package/src/css/component.text.css

@@ -0,0 +1,158 @@
+/* ==========================================================================
+   text.css
+   ========================================================================== */
+
+   @layer components {
+    .c-h0 {
+      @apply mb-8;
+      font-size: 2.5rem;
+      @apply font-bold;
+      @apply leading-tight;
+    }
+  
+    .c-h1 {
+      @apply mb-lg;
+      @apply text-3xl;
+      @apply font-bold;
+      @apply leading-tight;
+    }
+  
+    .c-h2 {
+      @apply mb-base;
+      @apply text-2xl;
+      @apply font-bold;
+      @apply leading-tight;
+    }
+  
+    .c-h3 {
+      @apply mb-sm;
+      @apply text-lg;
+      @apply font-bold;
+      @apply leading-tight;
+    }
+  
+    .c-h4 {
+      @apply mb-sm;
+      @apply text-base;
+      @apply font-bold;
+      @apply leading-tight;
+    }
+  
+    .c-link {
+      @apply text-primary-base;
+      @apply underline;
+  
+      &:hover {
+        @apply text-primary-dark;
+      }
+  
+      &:focus {
+        @apply bg-warning-base;
+        @apply shadow-outline-focus;
+        @apply outline-none;
+        @apply text-black;
+      }
+    }
+  
+    .c-link--alert {
+      @apply text-alert-base;
+      @apply underline;
+      @apply font-semibold;
+  
+      &:hover {
+        @apply text-alert-dark;
+      }
+    }
+  
+    .c-link--neutral {
+      @apply text-neutral-dark;
+      @apply underline;
+  
+      &:hover {
+        @apply text-black;
+      }
+    }
+  
+    .c-link--full {
+      &::after {
+        content:"";
+        @apply absolute;
+        @apply inset-0;
+      }
+    }
+  
+    .c-paragraph-lg {
+      @apply mb-lg;
+      @apply text-lg;
+    }
+  
+    .c-paragraph-base {
+      @apply mb-base;
+      @apply text-base;
+    }
+  
+    .c-paragraph-sm {
+      @apply mb-sm;
+      @apply text-sm;
+    }
+  
+    .c-ul {
+      @apply mb-base;
+      @apply list-none;
+  
+      li {
+        @apply relative;
+        @apply mb-base;
+        @apply pl-8;
+  
+        &::before {
+          content: "";
+          @apply absolute;
+          top: .625rem;
+          left: .25rem;
+          @apply w-1.5;
+          @apply h-1.5;
+          @apply bg-black;
+          @apply rounded-full;
+        }
+  
+        &:last-of-type {
+          @apply mb-0;
+        }
+      }
+    }
+  
+    .c-ul--no-bullets {
+      li {
+        @apply pl-0;
+  
+        &::before {
+          @apply hidden;
+        }
+      }
+    }
+  
+    .c-ol {
+      @apply mb-base;
+      counter-reset: list-counter;
+  
+      li {
+        @apply relative;
+        @apply mb-base;
+        @apply pl-8;
+  
+        &::before {
+          counter-increment: list-counter;
+          content: counter(list-counter) ".";
+          @apply absolute;
+          left: .25rem;
+          @apply text-black;
+        }
+  
+        &:last-of-type {
+          @apply mb-0;
+        }
+      }
+    }
+  }
+  

package/src/css/styles.css

@@ -14,6 +14,7 @@
 /* Framework components */
 @import "tailwindcss/components";
 /* Custom components */
+@import "./component.text.css";
 @import "../templates/components/alert/_styles.alert.css";
 @import "../templates/components/breadcrumbs/_styles.breadcrumbs.css";
 @import "../templates/components/button/_styles.button.css";

package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css

@@ -47,6 +47,11 @@
       @apply lg:inline-flex;
       @apply leading-loose;
       @apply lg:leading-tight;
+
+      a, span {
+        @apply whitespace-normal;
+        @apply lg:truncate;
+      }
     }
   }
 
@@ -55,6 +60,10 @@
     li {
       @apply lg:inline;
       @apply lg:leading-loose;
+
+      a, span {
+        @apply lg:whitespace-normal;
+      }
     }
   }
 

package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk

@@ -52,7 +52,7 @@ lg:grid-cols-max-content-8{% endif %}
   {% endif %}
   {% for item in params.items %}
     {% if item.href %}
-    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
+    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
       <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
         {% if loop.last %}
         <strong>{{ item.html | safe if item.html else item.text }}</strong>
@@ -62,7 +62,7 @@ lg:grid-cols-max-content-8{% endif %}
       </a>
     </li>
     {% else %}
-    <li class="flex items-baseline mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
+    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
       <span class="no-underline {%- if loop.last %} text-black{% endif %} truncate"{% if loop.last %} aria-current="page"{% endif %}>
         {% if loop.last %}
         <strong>{{ item.html | safe if item.html else item.text }}</strong>

package/src/templates/components/footer/_template.footer.njk

@@ -1,5 +1,5 @@
 <!-- footer -->
-<footer class="py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm
+<footer class="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
 text-neutral-dark {{ params.classes if params.classes }}"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="container mx-auto px-base {{ params.containerClasses if params.containerClasses }}">