Skip to content

Prose white #1367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 3, 2025
Merged

Prose white #1367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f696e1
remove unused prose custom properties
alexanbj Jul 2, 2025
7f8be76
add `prose-white` modifier to prose for white text
alexanbj Jul 2, 2025
1f191a0
changeset
alexanbj Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/tangy-laws-eat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@obosbbl/grunnmuren-tailwind": patch
---

add `prose-white` to override `prose` to use white text, suitable for use on dark blue backgrounds.

eg: `<div class="bg-blue-dark prose prose-white">...</div>`
91 changes: 53 additions & 38 deletions packages/react/src/__stories__/typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,45 +88,60 @@ export const Description = () => (
</figcaption>
);

const ProseContent = () => {
return (
<>
<h1 className="text-center">Woops!</h1>

<p className="lead text-center">Nå er det noe som er galt her.</p>

<p className="text-center">
Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige
akkurat nå. De digitale bygningsarbeiderne våre jobber på spreng for å
fikse feilen, og vanligvis er sidene oppe og går igjen i løpet av kort
tid. Nedenfor finner du kontaktinformasjon.
</p>

<h2>Kontakt Fluks — OBOS Block Watne</h2>

<blockquote>
Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
virket det nesten umulig å komme inn på markedet. Jeg var på noen
visninger, men det ble enten for lite eller for gammelt og slitt
</blockquote>

<p>
Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
</p>
<hr />
<p>
E-post: <a href="mailto:obw.flukspost@obos.no">obw.flukspost@obos.no</a>
</p>

<p className="description">Ved stor pågang vil det være noe ventetid.</p>
<ul>
<li>hei</li>
<li>på</li>
<li>deg</li>
</ul>
<ol>
<li>hei</li>
<li>på</li>
<li>deg</li>
</ol>
</>
);
};

export const Prose = () => (
<div className="prose container-prose my-12 md:my-20" id="main">
<h1 className="text-center">Woops!</h1>

<p className="lead text-center">Nå er det noe som er galt her.</p>

<p className="text-center">
Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige akkurat
nå. De digitale bygningsarbeiderne våre jobber på spreng for å fikse
feilen, og vanligvis er sidene oppe og går igjen i løpet av kort tid.
Nedenfor finner du kontaktinformasjon.
</p>

<h2>Kontakt Fluks — OBOS Block Watne</h2>

<blockquote>
Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
virket det nesten umulig å komme inn på markedet. Jeg var på noen
visninger, men det ble enten for lite eller for gammelt og slitt
</blockquote>

<p>
Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
</p>
<p>
E-post: <a href="mailto:obw.flukspost@obos.no">obw.flukspost@obos.no</a>
</p>

<p className="description">Ved stor pågang vil det være noe ventetid.</p>
<ul>
<li>hei</li>
<li>på</li>
<li>deg</li>
</ul>
<ol>
<li>hei</li>
<li>på</li>
<li>deg</li>
</ol>
<div className="prose container-prose my-12md:my-20">
<ProseContent />
</div>
);

export const ProseWhite = () => (
<div className="prose prose-white container-prose my-12md:my-20 bg-blue-dark">
<ProseContent />
</div>
);

Expand Down
27 changes: 7 additions & 20 deletions packages/tailwind/tailwind-typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
--tw-prose-counters: --theme(--color-black, initial);
--tw-prose-bullets: --theme(--color-black, initial);
--tw-prose-hr: --theme(--color-gray-200, initial);
--tw-prose-quotes: inherit;
--tw-prose-quote-borders: --theme(--color-gray-200, initial);
--tw-prose-captions: --theme(--color-gray-500, initial);
--tw-prose-kbd: --theme(--color-gray-900, initial);
--tw-prose-kbd-shadows: --theme(--color-gray-900, initial);
Expand All @@ -50,24 +48,6 @@
--tw-prose-pre-bg: --theme(--color-gray-800, initial);
--tw-prose-th-borders: --theme(--color-gray-300, initial);
--tw-prose-td-borders: --theme(--color-gray-200, initial);
--tw-prose-invert-body: --theme(--color-gray-300, initial);
--tw-prose-invert-headings: --theme(--color-white, initial);
--tw-prose-invert-lead: --theme(--color-gray-400, initial);
--tw-prose-invert-links: --theme(--color-white, initial);
--tw-prose-invert-bold: --theme(--color-white, initial);
--tw-prose-invert-counters: --theme(--color-gray-400, initial);
--tw-prose-invert-bullets: --theme(--color-gray-600, initial);
--tw-prose-invert-hr: --theme(--color-gray-700, initial);
--tw-prose-invert-quotes: --theme(--color-gray-100, initial);
--tw-prose-invert-quote-borders: --theme(--color-gray-700, initial);
--tw-prose-invert-captions: --theme(--color-gray-400, initial);
--tw-prose-invert-kbd: --theme(--color-white, initial);
--tw-prose-invert-kbd-shadows: --theme(--color-white, initial);
--tw-prose-invert-code: --theme(--color-white, initial);
--tw-prose-invert-pre-code: --theme(--color-gray-300, initial);
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: --theme(--color-gray-600, initial);
--tw-prose-invert-td-borders: --theme(--color-gray-700, initial);

font-size: 1rem;
line-height: 1.75;
Expand Down Expand Up @@ -507,3 +487,10 @@
}
}
}

@utility prose-white {
--tw-prose-body: --theme(--color-white, initial);
--tw-prose-bullets: --theme(--color-white, initial);
--tw-prose-counters: --theme(--color-white, initial);
--tw-prose-hr: --theme(--color-white, initial);
}