@obosbbl/grunnmuren-tailwind 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Grunnmuren Tailwind preset",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -16,7 +16,7 @@
     "font.css"
   ],
   "devDependencies": {
-    "tailwindcss": "4.1.10"
+    "tailwindcss": "4.1.17"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0"

package/tailwind-base.css

@@ -108,8 +108,13 @@
   @apply bg-white grow;
 }
 
+/** Grid column spacing */
+@utility layout-grid-gap-x {
+  @apply sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
+}
+
 @utility layout-gap-x {
-  @apply gap-x-2 sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
+  @apply gap-x-2 layout-grid-gap-x;
 }
 
 @utility layout-gap-y {
@@ -194,3 +199,143 @@
     display: none;
   }
 }
+
+@layer components {
+  /*** Grid Layout ***/
+
+  .layout-grid,
+  .layout-grid-container {
+    /** Grid base: defines the grid columns and their spacing */
+    @apply layout-grid-gap-x sm:grid-cols-14 grid;
+
+    /** Grid container that applies the grid columns, grid spacing and the container component class */
+    &.layout-grid-container {
+      @apply container;
+      /** Make content of the grid span the mid 12 columns as a default (unless it has another explicit col-span class) */
+      & > * {
+        @apply sm:col-start-2 sm:col-span-12;
+      }
+    }
+  }
+
+  [class*="layout-subgrid-"] {
+    @apply layout-grid-gap-x grid;
+  }
+
+  [class*="layout-subgrid-1"] {
+    @apply grid-cols-1;
+  }
+  [class*="layout-subgrid-2"] {
+    @apply grid-cols-2;
+  }
+  [class*="layout-subgrid-3"] {
+    @apply grid-cols-3;
+  }
+  [class*="layout-subgrid-4"] {
+    @apply grid-cols-4;
+  }
+  [class*="layout-subgrid-5"] {
+    @apply grid-cols-5;
+  }
+  [class*="layout-subgrid-6"] {
+    @apply grid-cols-6;
+  }
+  [class*="layout-subgrid-7"] {
+    @apply grid-cols-7;
+  }
+  [class*="layout-subgrid-8"] {
+    @apply grid-cols-8;
+  }
+  [class*="layout-subgrid-9"] {
+    @apply grid-cols-9;
+  }
+  [class*="layout-subgrid-10"] {
+    @apply grid-cols-10;
+  }
+  [class*="layout-subgrid-11"] {
+    @apply grid-cols-11;
+  }
+  [class*="layout-subgrid-12"] {
+    @apply grid-cols-12;
+  }
+
+  /*** Link List component styles ***/
+  .link-list-container {
+    @apply @container;
+
+    &:has([data-slot="heading"]) {
+      .link-list,
+      [data-slot="link-list"] {
+        @apply overflow-visible;
+      }
+    }
+
+    [data-slot="heading"] {
+      @apply p-1.25;
+
+      [data-slot="link"] {
+        @apply py-2.25;
+        & > svg {
+          @apply text-base;
+        }
+      }
+
+      &:not(:has([data-slot="link"])) {
+        @apply my-2.25;
+      }
+    }
+
+    [data-slot="link-list"] {
+      @apply @sm:gap-x-4 @md:gap-x-9 @lg:gap-x-12 @xl:gap-x-16;
+
+      &:has([data-slot="link-list-item"]:nth-child(6)):not(
+          :has([data-slot="link-list-item"]:nth-child(9):last-child)
+        ):not(:has([data-slot="link-list-item"]:nth-child(11))) {
+        @apply @4xl:grid-cols-2;
+      }
+      &:has([data-slot="link-list-item"]:nth-child(9):last-child),
+      &:has([data-slot="link-list-item"]:nth-child(11)) {
+        @apply @4xl:grid-cols-3;
+      }
+    }
+  }
+
+  .link-list,
+  [data-slot="link-list"] {
+    /**
+     * Hides dividers at the top of the list (overflow-y)
+     * while preventing arrow icons from overflowing container when animated to the right (overflow-x)
+     */
+    @apply min-w-fit overflow-hidden grid auto-rows-max gap-y-px;
+  }
+
+  .link-list-item,
+  [data-slot="link-list-item"] {
+    /** Creates divider lines that works in any grid layout and with the focus ring */
+    @apply after:-top-px relative p-1.25 after:absolute after:right-0 after:left-0 after:h-px after:w-full after:bg-gray-light;
+    [data-slot="link"] {
+      @apply paragraph;
+    }
+  }
+
+  .link-list-container,
+  .link-list-item,
+  [data-slot="link-list-item"] {
+    [data-slot="link"] {
+      @apply flex w-full cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus;
+    }
+  }
+
+  .link-list-container [data-slot="link"],
+  [data-slot="link-list-item"] [data-slot="link"] {
+    &:hover:not([download]):not([rel~="external"]) svg {
+      @apply motion-safe:translate-x-1;
+    }
+    &[download]:hover svg {
+      @apply motion-safe:translate-y-1;
+    }
+    &[rel~="external"]:hover svg {
+      @apply motion-safe:-translate-y-0.5 motion-safe:translate-x-0.5;
+    }
+  }
+}

package/tailwind-typography.css

@@ -3,33 +3,64 @@
  * To support the prose styles from the tailwindcss-typography plugin.
  */
 
-@custom-variant prose-headings (& :is(h1, h2, h3, h4, th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-lead (& :is([class~="lead"]):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-h1 (& :is(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-h2 (& :is(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-h3 (& :is(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-h4 (& :is(h4):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-p (& :is(p):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-a (& :is(a):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-blockquote (& :is(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-figure (& :is(figure):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-figcaption (& :is(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-strong (& :is(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-em (& :is(em):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-kbd (& :is(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-code (& :is(code):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-pre (& :is(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-ol (& :is(ol):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-ul (& :is(ul):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-li (& :is(li):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-table (& :is(table):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-thead (& :is(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-tr (& :is(tr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-th (& :is(th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-td (& :is(td):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-img (& :is(img):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-video (& :is(video):not(:where([class~='not-prose'], [class~='not-prose'] *)));
-@custom-variant prose-hr (& :is(hr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-headings (&
+:is(h1, h2, h3, h4, h5, th):not(
+  :where([class~="not-prose"], [class~="not-prose"] *)
+));
+@custom-variant prose-lead (&
+:is([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-h1 (&
+:is(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-h2 (&
+:is(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-h3 (&
+:is(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-h4 (&
+:is(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-h5 (&
+:is(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-p (&
+:is(p):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-a (&
+:is(a):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-blockquote (&
+:is(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-figure (&
+:is(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-figcaption (&
+:is(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-strong (&
+:is(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-em (&
+:is(em):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-kbd (&
+:is(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-code (&
+:is(code):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-pre (&
+:is(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-ol (&
+:is(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-ul (&
+:is(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-li (&
+:is(li):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-table (&
+:is(table):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-thead (&
+:is(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-tr (&
+:is(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-th (&
+:is(th):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-td (&
+:is(td):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-img (&
+:is(img):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-video (&
+:is(video):not(:where([class~="not-prose"], [class~="not-prose"] *)));
+@custom-variant prose-hr (&
+:is(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)));
 
 @utility prose {
   --tw-prose-body: --theme(--color-black, initial);
@@ -164,10 +195,7 @@
     }
 
     &:where(blockquote) {
-      @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem]
-      pt-4 text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]
-      before:text-[4.6875rem]/[1.6875rem] before:font-display
-      before:not-italic before:content-["“"];
+      @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem] pt-4 text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem] before:text-[4.6875rem]/[1.6875rem] before:font-display before:not-italic before:content-["“"];
       margin-top: 1.6em;
       margin-bottom: 1.6em;
     }
@@ -219,6 +247,12 @@
       margin-bottom: 0.5em;
     }
 
+    &:where(h5) {
+      @apply heading-xs;
+      margin-top: 1.4em;
+      margin-bottom: 0.4em;
+    }
+
     &:where(h4 strong) {
       font-weight: 700;
       color: inherit;
@@ -239,8 +273,9 @@
       font-weight: 500;
       font-family: inherit;
       color: var(--tw-prose-kbd);
-      box-shadow: 0 0 0 1px --alpha(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0
-        --alpha(var(--tw-prose-kbd-shadows) / 10%);
+      box-shadow:
+        0 0 0 1px --alpha(var(--tw-prose-kbd-shadows) / 10%),
+        0 3px 0 --alpha(var(--tw-prose-kbd-shadows) / 10%);
       font-size: 0.875em;
       border-radius: 0.3125rem;
       padding-top: 0.1875em;
@@ -404,22 +439,6 @@
       margin-bottom: 0.75em;
     }
 
-    &:where(.prose > ul > li > *:first-child) {
-      margin-top: 1.25em;
-    }
-
-    &:where(.prose > ul > li > *:last-child) {
-      margin-bottom: 1.25em;
-    }
-
-    &:where(.prose > ol > li > *:first-child) {
-      margin-top: 1.25em;
-    }
-
-    &:where(.prose > ol > li > *:last-child) {
-      margin-bottom: 1.25em;
-    }
-
     &:where(ul ul, ul ol, ol ul, ol ol) {
       margin-top: 0.75em;
       margin-bottom: 0.75em;
@@ -451,6 +470,10 @@
       margin-top: 0;
     }
 
+    &:where(h5 + *) {
+      margin-top: 0;
+    }
+
     &:where(thead th:first-child) {
       padding-left: 0;
     }