Skip to content

Commit d611103

Browse files
alexanbjalexanbj
authored
Prose white (#1367)
* remove unused prose custom properties * add `prose-white` modifier to prose for white text suitable for use on blue-dark backgrounds
1 parent 90cfb8e commit d611103

File tree

3 files changed

+67
-58
lines changed

3 files changed

+67
-58
lines changed

‎.changeset/tangy-laws-eat.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@obosbbl/grunnmuren-tailwind": patch
3+
---
4+
5+
add `prose-white` to override `prose` to use white text, suitable for use on dark blue backgrounds.
6+
7+
eg: `<div class="bg-blue-dark prose prose-white">...</div>`

‎packages/react/src/__stories__/typography.stories.tsx‎

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -88,45 +88,60 @@ export const Description = () => (
8888
</figcaption>
8989
);
9090

91+
const ProseContent = () => {
92+
return (
93+
<>
94+
<h1 className="text-center">Woops!</h1>
95+
96+
<p className="lead text-center">Nå er det noe som er galt her.</p>
97+
98+
<p className="text-center">
99+
Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige
100+
akkurat nå. De digitale bygningsarbeiderne våre jobber på spreng for å
101+
fikse feilen, og vanligvis er sidene oppe og går igjen i løpet av kort
102+
tid. Nedenfor finner du kontaktinformasjon.
103+
</p>
104+
105+
<h2>Kontakt Fluks — OBOS Block Watne</h2>
106+
107+
<blockquote>
108+
Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
109+
virket det nesten umulig å komme inn på markedet. Jeg var på noen
110+
visninger, men det ble enten for lite eller for gammelt og slitt
111+
</blockquote>
112+
113+
<p>
114+
Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
115+
</p>
116+
<hr />
117+
<p>
118+
E-post: <a href="mailto:[email protected]">[email protected]</a>
119+
</p>
120+
121+
<p className="description">Ved stor pågang vil det være noe ventetid.</p>
122+
<ul>
123+
<li>hei</li>
124+
<li>på</li>
125+
<li>deg</li>
126+
</ul>
127+
<ol>
128+
<li>hei</li>
129+
<li>på</li>
130+
<li>deg</li>
131+
</ol>
132+
</>
133+
);
134+
};
135+
91136
export const Prose = () => (
92-
<div className="prose container-prose my-12 md:my-20" id="main">
93-
<h1 className="text-center">Woops!</h1>
94-
95-
<p className="lead text-center">Nå er det noe som er galt her.</p>
96-
97-
<p className="text-center">
98-
Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige akkurat
99-
nå. De digitale bygningsarbeiderne våre jobber på spreng for å fikse
100-
feilen, og vanligvis er sidene oppe og går igjen i løpet av kort tid.
101-
Nedenfor finner du kontaktinformasjon.
102-
</p>
103-
104-
<h2>Kontakt Fluks — OBOS Block Watne</h2>
105-
106-
<blockquote>
107-
Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
108-
virket det nesten umulig å komme inn på markedet. Jeg var på noen
109-
visninger, men det ble enten for lite eller for gammelt og slitt
110-
</blockquote>
111-
112-
<p>
113-
Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
114-
</p>
115-
<p>
116-
E-post: <a href="mailto:[email protected]">[email protected]</a>
117-
</p>
118-
119-
<p className="description">Ved stor pågang vil det være noe ventetid.</p>
120-
<ul>
121-
<li>hei</li>
122-
<li>på</li>
123-
<li>deg</li>
124-
</ul>
125-
<ol>
126-
<li>hei</li>
127-
<li>på</li>
128-
<li>deg</li>
129-
</ol>
137+
<div className="prose container-prose my-12md:my-20">
138+
<ProseContent />
139+
</div>
140+
);
141+
142+
export const ProseWhite = () => (
143+
<div className="prose prose-white container-prose my-12md:my-20 bg-blue-dark">
144+
<ProseContent />
130145
</div>
131146
);
132147

‎packages/tailwind/tailwind-typography.css‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@
4040
--tw-prose-counters: --theme(--color-black, initial);
4141
--tw-prose-bullets: --theme(--color-black, initial);
4242
--tw-prose-hr: --theme(--color-gray-200, initial);
43-
--tw-prose-quotes: inherit;
44-
--tw-prose-quote-borders: --theme(--color-gray-200, initial);
4543
--tw-prose-captions: --theme(--color-gray-500, initial);
4644
--tw-prose-kbd: --theme(--color-gray-900, initial);
4745
--tw-prose-kbd-shadows: --theme(--color-gray-900, initial);
@@ -50,24 +48,6 @@
5048
--tw-prose-pre-bg: --theme(--color-gray-800, initial);
5149
--tw-prose-th-borders: --theme(--color-gray-300, initial);
5250
--tw-prose-td-borders: --theme(--color-gray-200, initial);
53-
--tw-prose-invert-body: --theme(--color-gray-300, initial);
54-
--tw-prose-invert-headings: --theme(--color-white, initial);
55-
--tw-prose-invert-lead: --theme(--color-gray-400, initial);
56-
--tw-prose-invert-links: --theme(--color-white, initial);
57-
--tw-prose-invert-bold: --theme(--color-white, initial);
58-
--tw-prose-invert-counters: --theme(--color-gray-400, initial);
59-
--tw-prose-invert-bullets: --theme(--color-gray-600, initial);
60-
--tw-prose-invert-hr: --theme(--color-gray-700, initial);
61-
--tw-prose-invert-quotes: --theme(--color-gray-100, initial);
62-
--tw-prose-invert-quote-borders: --theme(--color-gray-700, initial);
63-
--tw-prose-invert-captions: --theme(--color-gray-400, initial);
64-
--tw-prose-invert-kbd: --theme(--color-white, initial);
65-
--tw-prose-invert-kbd-shadows: --theme(--color-white, initial);
66-
--tw-prose-invert-code: --theme(--color-white, initial);
67-
--tw-prose-invert-pre-code: --theme(--color-gray-300, initial);
68-
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
69-
--tw-prose-invert-th-borders: --theme(--color-gray-600, initial);
70-
--tw-prose-invert-td-borders: --theme(--color-gray-700, initial);
7151

7252
font-size: 1rem;
7353
line-height: 1.75;
@@ -507,3 +487,10 @@
507487
}
508488
}
509489
}
490+
491+
@utility prose-white {
492+
--tw-prose-body: --theme(--color-white, initial);
493+
--tw-prose-bullets: --theme(--color-white, initial);
494+
--tw-prose-counters: --theme(--color-white, initial);
495+
--tw-prose-hr: --theme(--color-white, initial);
496+
}

0 commit comments

Comments
 (0)