desy-html 11.0.3 → 11.0.4

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/index.html

@@ -38,6 +38,11 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <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.4",
   "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/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/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 }}">