@obosbbl/grunnmuren-tailwind 2.4.5 → 2.4.7

package/README.md

@@ -21,7 +21,7 @@ Configure Tailwind to use the preset
 ```css
 /* globals.css */
 
-@import "@obosbbl/grunnmuren-tailwind";
+@import '@obosbbl/grunnmuren-tailwind';
 
 /** Add any auto excluded sources (typically residing in node_modules) */
 @source "../../node_modules/@obosbbl/grunnmuren-react/dist";
@@ -51,9 +51,7 @@ To do that you need to configure the preset with `legacyV1Compatibility` option.
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  presets: [
-    require('@obosbbl/grunnmuren-tailwind')({ includeFontFallback: false }),
-  ],
+  presets: [require('@obosbbl/grunnmuren-tailwind')({ includeFontFallback: false })],
   // content: [ ... ]
 };
 ```
@@ -66,6 +64,7 @@ The preset supports the following options:
 | legacyV1Compatibility | `false`       | Configures partial compatibility with Grunnmuren v1 |
 
 ## Migrating from v2?
+
 Tailwind is upgraded to v4. The `grunnmuren-tailwind` package is now CSS-first configured. And the previously exposed JS config file is now replaced by a CSS config file.
 
 The `legacyV1Compatibility` option is removed, so your project has to be fully upgraded to Grunnmuren v2.
@@ -73,15 +72,16 @@ The `legacyV1Compatibility` option is removed, so your project has to be fully u
 The `includeFontFallback` option is also removed, and a font fallback will automatically be applied to the OBOS fonts by defaullt.
 
 ## Migration
+
 1. Upgrade your project to Tailwind 4. You can try the [migration guide](https://tailwindcss.com/docs/upgrade-guide)
- from tailwind.
+   from tailwind.
 2. Add `@import "@obosbbl/grunnmuren-tailwind";` to the top of the main CSS file of your project. This is the new CSS configuration file for Grunnmuren.
 3. If you have a JS/TS `tailwind.config` in your project and would like to keep it. You can include it in the main CSS file (mentioned in step 2), by using the `@config` directive, e.g: `@config '../tailwind.config.ts';`. Read more [here](https://tailwindcss.com/docs/functions-and-directives#compatibility).
 4. Finally, if you would like to get rid of the old `tailwind.config`. You can move all your configuration to the main CSS file of your project. Tailwind 4 has automatic content detection, but if you need to include some excluded source you can use the `@source` directive, e.g: `@source "./node_modules/@obosbbl/grunnmuren-react/dist";`. You can also extend the `@obosbbl/grunnmuren-tailwind` config by using various directives such as `@base` or `@theme`.
 
-Here is an example of what your main CSS file __might__ look like after migration:
+Here is an example of what your main CSS file **might** look like after migration:
 
-``` CSS
+```CSS
 @import "@obosbbl/grunnmuren-tailwind";
 
 @source "../../node_modules/@obosbbl/grunnmuren-react/dist";

package/font.css

@@ -1,7 +1,7 @@
 @layer base {
   @font-face {
-    font-family: "__OBOSText_Fallback";
-    src: local("Arial");
+    font-family: '__OBOSText_Fallback';
+    src: local('Arial');
     size-adjust: 100%;
     ascent-override: 94%;
     descent-override: 26%;
@@ -9,13 +9,11 @@
   }
 
   @font-face {
-    font-family: "__OBOSDisplay_Fallback";
-    src: local("Arial");
+    font-family: '__OBOSDisplay_Fallback';
+    src: local('Arial');
     size-adjust: 100%;
     ascent-override: 94%;
     descent-override: 26%;
     line-gap-override: 0%;
   }
-
 }
-

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.4.5",
+  "version": "2.4.7",
   "description": "Grunnmuren Tailwind preset",
+  "license": "MIT",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
   },
-  "license": "MIT",
-  "type": "commonjs",
-  "exports": {
-    ".": "./tailwind-base.css"
-  },
   "files": [
     "tailwind-base.css",
     "tailwind-typography.css",
     "font.css"
   ],
+  "type": "commonjs",
+  "exports": {
+    ".": "./tailwind-base.css"
+  },
+  "dependencies": {
+    "tw-animate-css": "^1.2.5"
+  },
   "devDependencies": {
-    "tailwindcss": "4.1.18"
+    "tailwindcss": "4.2.1"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0"
   },
-  "dependencies": {
-    "tw-animate-css": "^1.2.5"
-  },
   "scripts": {
     "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"
   }

package/tailwind-base.css

@@ -1,7 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "./tailwind-typography";
-@import "./font";
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './tailwind-typography';
+@import './font';
 
 @theme {
   /*** Font stacks ***/
@@ -49,7 +49,7 @@
     font-family: OBOSText;
     font-weight: 400;
     font-style: normal;
-    src: url("https://www.obos.no/fonts/OBOSText-Regular.woff2") format("woff2");
+    src: url('https://www.obos.no/fonts/OBOSText-Regular.woff2') format('woff2');
     font-display: swap;
   }
 
@@ -57,7 +57,7 @@
     font-family: OBOSText;
     font-weight: 400;
     font-style: italic;
-    src: url("https://www.obos.no/fonts/OBOSText-Italic.woff2") format("woff2");
+    src: url('https://www.obos.no/fonts/OBOSText-Italic.woff2') format('woff2');
     font-display: swap;
   }
 
@@ -65,7 +65,7 @@
     font-family: OBOSText;
     font-weight: 500;
     font-style: normal;
-    src: url("https://www.obos.no/fonts/OBOSText-Medium.woff2") format("woff2");
+    src: url('https://www.obos.no/fonts/OBOSText-Medium.woff2') format('woff2');
     font-display: swap;
   }
 
@@ -73,8 +73,7 @@
     font-family: OBOSDisplay;
     font-weight: 600; /* SemiBold */
     font-style: normal;
-    src: url("https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2")
-      format("woff2");
+    src: url('https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2') format('woff2');
     font-display: swap;
   }
 
@@ -121,9 +120,49 @@
 /** Grid container that applies the grid columns, grid spacing and the container component class */
 @utility layout-grid-container {
   @apply layout-grid 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;
+  /**
+   * Make content of the grid span the mid 12 columns as a default,
+   * unless the child has an explicit col-span or col-end class.
+   *
+   * We use ^= (starts with) and *= ' ' (space-preceded) to only match classes
+   * that apply to the element itself, not descendant selectors like *:col-span-* or **:col-span-*.
+   */
+  &
+    > *:not(
+      :where(
+        [class^='col-span'],
+        [class*=' col-span'],
+        [class^='col-end'],
+        [class*=' col-end'],
+        [class^='sm:col-span'],
+        [class*=' sm:col-span'],
+        [class^='sm:col-end'],
+        [class*=' sm:col-end'],
+
+      )
+    ) {
+    @apply sm:col-span-12;
+  }
+
+  /**
+   * Default col-start for grid children.
+   * Apply sm:col-start-2 unless the child has an explicit col-start or col-span-full class.
+   */
+  &
+    > *:not(
+      :where(
+        [class^='col-start'],
+        [class*=' col-start'],
+        [class^='col-span-full'],
+        [class*=' col-span-full'],
+        [class^='sm:col-start'],
+        [class*=' sm:col-start'],
+        [class^='sm:col-span-full'],
+        [class*=' sm:col-span-full'],
+
+      )
+    ) {
+    @apply sm:col-start-2;
   }
 }
 
@@ -167,6 +206,15 @@
 @utility layout-subgrid-12 {
   @apply grid-cols-12;
 }
+@utility layout-subgrid-13 {
+  @apply grid-cols-13;
+}
+@utility layout-subgrid-14 {
+  @apply grid-cols-14;
+}
+@utility layout-subgrid-full {
+  @apply layout-subgrid-14;
+}
 
 @utility layout-gap-x {
   @apply gap-x-2;
@@ -262,16 +310,16 @@
 
 @layer components {
   /*** Link List component styles ***/
-  [data-layout="grid"] {
-    [data-slot="link-list"] {
+  [data-layout='grid'] {
+    [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))) {
+      &: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)) {
+      &: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;
       }
     }
@@ -279,18 +327,18 @@
 
   /*** Stepper component styles ***/
   .stepper-container,
-  [data-slot="stepper-container"] {
+  [data-slot='stepper-container'] {
     @apply relative max-lg:overflow-hidden max-lg:min-w-full;
     /** Make room for the focus outline */
     @apply max-lg:px-1;
   }
 
   .stepper,
-  [data-slot="stepper"] {
+  [data-slot='stepper'] {
     counter-reset: step-counter;
     @apply flex gap-x-2 lg:flex-col lg:gap-y-14;
 
-    [data-slot="step"] {
+    [data-slot='step'] {
       counter-increment: step-counter;
       @apply flex items-center gap-x-2 relative max-lg:my-1.5 not-last:grow;
 
@@ -300,13 +348,13 @@
       }
 
       /** Place the focus styles on the ::before element instead of the link, since the link text is not visible on smaller screens */
-      &:has([data-slot="link"]:focus-visible) {
+      &:has([data-slot='link']:focus-visible) {
         &::before {
           @apply outline-focus-offset;
         }
       }
 
-      [data-slot="link"] {
+      [data-slot='link'] {
         @apply max-lg:absolute max-lg:opacity-0 max-lg:max-w-11 max-lg:overflow-x-hidden;
         @apply focus-visible:outline-none;
         /** Create a 44x44 px clickable area, where the step number next to each link will also be covered **/
@@ -317,14 +365,14 @@
         @apply bg-white text-blue-dark;
       }
 
-      &[data-state="completed"] {
+      &[data-state='completed'] {
         &::before {
           @apply bg-blue-dark text-white;
         }
       }
 
       /* order matters here, as data-current selector needs to come after completed state selector */
-      &[data-current="true"] {
+      &[data-current='true'] {
         &::before {
           @apply bg-sky-light border-4 text-blue-dark;
         }
@@ -334,7 +382,7 @@
         @apply text-white absolute border-2 border-white bg-blue-dark rounded-full left-4.5 -top-1.5 size-5;
       }
 
-      [data-slot="progress-bar"] {
+      [data-slot='progress-bar'] {
         @apply w-4 max-lg:grow lg:w-14 lg:rotate-90 lg:absolute lg:-left-3 lg:px-1.5 lg:-bottom-[calc(100%-2px)];
       }
     }

package/tailwind-typography.css

@@ -85,14 +85,14 @@
   color: var(--tw-prose-body);
   max-width: 696px;
 
-  :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  :not(:where([class~='not-prose'], [class~='not-prose'] *)) {
     &:where(p) {
       @apply text-[1rem]/[1.625rem];
       margin-top: 1.25em;
       margin-bottom: 1.25em;
     }
 
-    &:where([class~="lead"]) {
+    &:where([class~='lead']) {
       @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
       margin-top: 1.2em;
       margin-bottom: 1.2em;
@@ -129,39 +129,39 @@
       padding-left: 1.625em;
     }
 
-    &:where(ol[type="A"]) {
+    &:where(ol[type='A']) {
       list-style-type: upper-alpha;
     }
 
-    &:where(ol[type="a"]) {
+    &:where(ol[type='a']) {
       list-style-type: lower-alpha;
     }
 
-    &:where(ol[type="A" s]) {
+    &:where(ol[type='A' s]) {
       list-style-type: upper-alpha;
     }
 
-    &:where(ol[type="a" s]) {
+    &:where(ol[type='a' s]) {
       list-style-type: lower-alpha;
     }
 
-    &:where(ol[type="I"]) {
+    &:where(ol[type='I']) {
       list-style-type: upper-roman;
     }
 
-    &:where(ol[type="i"]) {
+    &:where(ol[type='i']) {
       list-style-type: lower-roman;
     }
 
-    &:where(ol[type="I" s]) {
+    &:where(ol[type='I' s]) {
       list-style-type: upper-roman;
     }
 
-    &:where(ol[type="i" s]) {
+    &:where(ol[type='i' s]) {
       list-style-type: lower-roman;
     }
 
-    &:where(ol[type="1"]) {
+    &:where(ol[type='1']) {
       list-style-type: decimal;
     }