From 5f98dd4e23d6fdd87406c0879426cf3807d4a3e8 Mon Sep 17 00:00:00 2001 From: Gabriel Wallin Date: Tue, 23 Sep 2025 14:04:38 +0200 Subject: [PATCH 1/4] move utility styles into components layer --- packages/tailwind/tailwind-base.css | 55 +++++++++++++++-------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/tailwind/tailwind-base.css b/packages/tailwind/tailwind-base.css index 000fdeda9..fd1a6aa76 100644 --- a/packages/tailwind/tailwind-base.css +++ b/packages/tailwind/tailwind-base.css @@ -125,41 +125,42 @@ max-width: 45.5rem; } -/*** Typography styles ***/ -@utility heading-xl { - @apply font-display font-semibold text-[2.8125rem]/[3.625rem] lg:text-[3.9375rem]/[5.125rem]; -} +@layer components { + .heading-xl { + @apply font-display font-semibold text-[2.8125rem]/[3.625rem] lg:text-[3.9375rem]/[5.125rem]; + } -@utility heading-l { - @apply font-display font-semibold text-[1.8125rem]/[2.75rem] lg:text-[2.25rem]/[3.5rem]; -} + .heading-l { + @apply font-display font-semibold text-[1.8125rem]/[2.75rem] lg:text-[2.25rem]/[3.5rem]; + } -@utility heading-m { - @apply font-text font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]; -} + .heading-m { + @apply font-text font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]; + } -@utility heading-s { - @apply font-text font-medium text-[1.1875rem]/[1.875rem] lg:text-[1.3125rem]/[2.125rem]; -} + .heading-s { + @apply font-text font-medium text-[1.1875rem]/[1.875rem] lg:text-[1.3125rem]/[2.125rem]; + } -@utility heading-xs { - @apply font-text font-medium text-[1.125rem]/[1.75rem] lg:text-[1.1875rem]/[1.9375rem]; -} + .heading-xs { + @apply font-text font-medium text-[1.125rem]/[1.75rem] lg:text-[1.1875rem]/[1.9375rem]; + } -@utility paragraph { - @apply text-[1rem]/[1.625rem]; -} + .paragraph { + @apply text-[1rem]/[1.625rem]; + } -@utility lead { - @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]; -} + .lead { + @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]; + } -@utility blockquote { - @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem] pt-4 text-[1.625rem]/[2.5625rem] lg:text-[1.4375rem]/[2.25rem] before:text-[4.6875rem]/[1.6875rem] before:font-display before:not-italic before:content-["“"]; -} + .blockquote { + @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem] pt-4 text-[1.625rem]/[2.5625rem] lg:text-[1.4375rem]/[2.25rem] before:text-[4.6875rem]/[1.6875rem] before:font-display before:not-italic before:content-["“"]; + } -@utility description { - @apply text-[0.875rem]/[1.375rem] lg:text-[0.875rem]/[1.4375rem]; + .description { + @apply text-[0.875rem]/[1.375rem] lg:text-[0.875rem]/[1.4375rem]; + } } /* Focus styles */ From 4f5207a573e42ae4510a10759acd65df1c7c2917 Mon Sep 17 00:00:00 2001 From: Gabriel Wallin Date: Tue, 23 Sep 2025 14:05:57 +0200 Subject: [PATCH 2/4] Reinsert comment --- packages/tailwind/tailwind-base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwind/tailwind-base.css b/packages/tailwind/tailwind-base.css index fd1a6aa76..79f4d83ed 100644 --- a/packages/tailwind/tailwind-base.css +++ b/packages/tailwind/tailwind-base.css @@ -125,6 +125,7 @@ max-width: 45.5rem; } +/*** Typography styles***/ @layer components { .heading-xl { @apply font-display font-semibold text-[2.8125rem]/[3.625rem] lg:text-[3.9375rem]/[5.125rem]; From aacd89ef59bcd655fcf8c5e23930ffb411fcaabb Mon Sep 17 00:00:00 2001 From: Gabriel Wallin Date: Tue, 23 Sep 2025 14:06:36 +0200 Subject: [PATCH 3/4] Move layer --- packages/tailwind/tailwind-base.css | 66 ++++++++++++++--------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/tailwind/tailwind-base.css b/packages/tailwind/tailwind-base.css index 79f4d83ed..53784dbc3 100644 --- a/packages/tailwind/tailwind-base.css +++ b/packages/tailwind/tailwind-base.css @@ -125,6 +125,39 @@ max-width: 45.5rem; } +/* Focus styles */ +@utility outline-focus { + @apply outline-2 outline-black; +} + +@utility outline-focus-offset { + @apply outline-focus outline-offset-2; +} + +@utility outline-focus-inset { + @apply outline-focus -outline-offset-4; +} + +@utility ring-focus { + @apply ring-2 ring-black; +} + +@utility ring-focus-offset { + @apply ring-focus ring-offset-2; +} + +/** Hides the scrollbar visually */ +@utility scrollbar-hidden { + /* For IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + + /* For Webkit-based browsers (Chrome, Safari and Opera) */ + &::-webkit-scrollbar { + display: none; + } +} + /*** Typography styles***/ @layer components { .heading-xl { @@ -163,36 +196,3 @@ @apply text-[0.875rem]/[1.375rem] lg:text-[0.875rem]/[1.4375rem]; } } - -/* Focus styles */ -@utility outline-focus { - @apply outline-2 outline-black; -} - -@utility outline-focus-offset { - @apply outline-focus outline-offset-2; -} - -@utility outline-focus-inset { - @apply outline-focus -outline-offset-4; -} - -@utility ring-focus { - @apply ring-2 ring-black; -} - -@utility ring-focus-offset { - @apply ring-focus ring-offset-2; -} - -/** Hides the scrollbar visually */ -@utility scrollbar-hidden { - /* For IE, Edge and Firefox */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - - /* For Webkit-based browsers (Chrome, Safari and Opera) */ - &::-webkit-scrollbar { - display: none; - } -} From e70d2940722676dfcc99f1fd57b0c0ee5dd754de Mon Sep 17 00:00:00 2001 From: Gabriel Wallin Date: Tue, 23 Sep 2025 14:07:49 +0200 Subject: [PATCH 4/4] changeset --- .changeset/blue-rabbits-laugh.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/blue-rabbits-laugh.md diff --git a/.changeset/blue-rabbits-laugh.md b/.changeset/blue-rabbits-laugh.md new file mode 100644 index 000000000..5a3783b21 --- /dev/null +++ b/.changeset/blue-rabbits-laugh.md @@ -0,0 +1,5 @@ +--- +"@obosbbl/grunnmuren-tailwind": patch +--- + +move utility styles into components layer