Skip to content

Commit fe122d0

Browse files
author
[email protected]
committed
updated typography
1 parent 222a4c4 commit fe122d0

File tree

2 files changed

+173
-21
lines changed

2 files changed

+173
-21
lines changed

‎src/components/style-guide/editor.scss‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,14 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
2525
.ugb-style-guide__columns {
2626
display: grid;
2727
grid-template-columns: 1fr 1fr;
28-
gap: 50px;
28+
gap: 24px;
2929
}
3030

3131
.ugb-style-guide__section-title {
3232
font-family: $guide-font-family;
3333
font-size: 32.44px;
3434
font-weight: 700;
35-
border-bottom: 1px solid #eee;
3635
line-height: 1.2;
37-
padding: 0 0 8px;
3836
margin-bottom: 1em;
3937
&:not(:first-child) {
4038
margin-top: 2.5em;
@@ -47,6 +45,9 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
4745
font-weight: 400;
4846
margin-bottom: 1em;
4947
color: #999;
48+
border-bottom: 1px solid #eee;
49+
margin-bottom: 32px;
50+
padding: 0 0 16px;
5051
&:not(:first-child) {
5152
margin-top: 2.5em;
5253
}
@@ -61,8 +62,8 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
6162
}
6263

6364
.ugb-style-guide__color-schemes {
64-
gap: 20px;
65-
margin-top: 20px;
65+
gap: 24px;
66+
margin-top: 24px;
6667
display: grid;
6768
grid-template-columns: repeat(3, 1fr);
6869

@@ -142,8 +143,8 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
142143
// Colors
143144

144145
.ugb-style-guide__colors {
145-
gap: 20px;
146-
margin-top: 20px;
146+
gap: 25px;
147+
margin-top: 24px;
147148
display: flex;
148149
flex-wrap: wrap;
149150
.ugb-style-guide__column {
@@ -164,6 +165,33 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
164165
flex-direction: column;
165166
gap: 4px;
166167
}
168+
169+
// Typography
170+
171+
.ugb-style-guide__typography-headings {
172+
grid-template-columns: 1fr 1fr 1fr;
173+
}
174+
175+
.ugb-style-guide__typography-container {
176+
margin: 32px 0;
177+
> *:not(div) {
178+
line-height: 1;
179+
margin: 0 !important;
180+
}
181+
}
182+
183+
.ugb-style-guide__typography-body {
184+
.ugb-style-guide__column:first-child {
185+
grid-column: 1 / 3;
186+
max-width: 80%;
187+
}
188+
}
189+
190+
.ugb-style-guide__typography-label {
191+
font-size: 14.22px;
192+
color: #bbb;
193+
margin-top: 8px;
194+
}
167195
}
168196
.ugb-style-guide-popover__heading {
169197
margin: 70px 70px 0;

‎src/components/style-guide/index.js‎

Lines changed: 138 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -126,12 +126,11 @@ const LONG_TEXT = [
126126

127127
// TODO: This is not yet finished
128128
const StyleGuide = props => {
129-
const { designSystem } = props
129+
const { designSystem, contentRef = null } = props
130130

131131
const {
132132
colors,
133133
colorSchemes = DUMMY_COLOR_SCHEMES,
134-
contentRef = null,
135134
} = designSystem
136135

137136
return (
@@ -141,6 +140,7 @@ const StyleGuide = props => {
141140

142141
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Colors', i18n ) }</h1>
143142

143+
{ /* TODO: Kae: the color schemes should always output at least 2 entries: 1 base color scheme and 1 background color scheme even at their default states. */ }
144144
{ colorSchemes && <>
145145
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Color Schemes', i18n ) }</h2>
146146
<div className="ugb-style-guide__columns ugb-style-guide__color-schemes">
@@ -202,7 +202,7 @@ const StyleGuide = props => {
202202
</div>
203203
</> }
204204

205-
{ colors && <>
205+
{ !! colors.length && <>
206206
<h2 className="ugb-style-guide__section-subheading">{ __( 'Global Color Palette', i18n ) }</h2>
207207
<div className="ugb-style-guide__columns ugb-style-guide__colors">
208208
{ colors.map( ( color, key ) => {
@@ -219,20 +219,144 @@ const StyleGuide = props => {
219219
{ /* TODO: Kae: Also add the color scheme colors here */ }
220220

221221
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Typography', i18n ) }</h1>
222-
<div className="ugb-style-guide__columns">
222+
<div className="ugb-style-guide__columns ugb-style-guide__typography-headings">
223+
224+
<div className="ugb-style-guide__column">
225+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Desktop', i18n ) }</h2>
226+
<div className="ugb-style-guide__typography-container">
227+
<h1>{ __( 'Heading 1', i18n ) }</h1>
228+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
229+
</div>
230+
<div className="ugb-style-guide__typography-container">
231+
<h2>{ __( 'Heading 2', i18n ) }</h2>
232+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
233+
</div>
234+
<div className="ugb-style-guide__typography-container">
235+
<h3>{ __( 'Heading 3', i18n ) }</h3>
236+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
237+
</div>
238+
<div className="ugb-style-guide__typography-container">
239+
<h4>{ __( 'Heading 4', i18n ) }</h4>
240+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
241+
</div>
242+
<div className="ugb-style-guide__typography-container">
243+
<h5>{ __( 'Heading 5', i18n ) }</h5>
244+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
245+
</div>
246+
<div className="ugb-style-guide__typography-container">
247+
<h6>{ __( 'Heading 6', i18n ) }</h6>
248+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
249+
</div>
250+
<div className="ugb-style-guide__typography-container">
251+
<p>{ __( 'Body', i18n ) }</p>
252+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
253+
</div>
254+
<div className="ugb-style-guide__typography-container">
255+
<p>{ __( 'Subtitle', i18n ) }</p>
256+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
257+
</div>
258+
<div className="ugb-style-guide__typography-container">
259+
<p>{ __( 'Button', i18n ) }</p>
260+
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
261+
</div>
262+
</div>
263+
264+
<div className="ugb-style-guide__column">
265+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Tablet', i18n ) }</h2>
266+
<div className="ugb-style-guide__typography-container">
267+
<h1>{ __( 'Heading 1', i18n ) }</h1>
268+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
269+
</div>
270+
<div className="ugb-style-guide__typography-container">
271+
<h2>{ __( 'Heading 2', i18n ) }</h2>
272+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
273+
</div>
274+
<div className="ugb-style-guide__typography-container">
275+
<h3>{ __( 'Heading 3', i18n ) }</h3>
276+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
277+
</div>
278+
<div className="ugb-style-guide__typography-container">
279+
<h4>{ __( 'Heading 4', i18n ) }</h4>
280+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
281+
</div>
282+
<div className="ugb-style-guide__typography-container">
283+
<h5>{ __( 'Heading 5', i18n ) }</h5>
284+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
285+
</div>
286+
<div className="ugb-style-guide__typography-container">
287+
<h6>{ __( 'Heading 6', i18n ) }</h6>
288+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
289+
</div>
290+
<div className="ugb-style-guide__typography-container">
291+
<p>{ __( 'Body', i18n ) }</p>
292+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
293+
</div>
294+
<div className="ugb-style-guide__typography-container">
295+
<p>{ __( 'Subtitle', i18n ) }</p>
296+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
297+
</div>
298+
<div className="ugb-style-guide__typography-container">
299+
<p>{ __( 'Button', i18n ) }</p>
300+
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
301+
</div>
302+
</div>
303+
304+
<div className="ugb-style-guide__column">
305+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Mobile', i18n ) }</h2>
306+
<div className="ugb-style-guide__typography-container">
307+
<h1>{ __( 'Heading 1', i18n ) }</h1>
308+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
309+
</div>
310+
<div className="ugb-style-guide__typography-container">
311+
<h2>{ __( 'Heading 2', i18n ) }</h2>
312+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
313+
</div>
314+
<div className="ugb-style-guide__typography-container">
315+
<h3>{ __( 'Heading 3', i18n ) }</h3>
316+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
317+
</div>
318+
<div className="ugb-style-guide__typography-container">
319+
<h4>{ __( 'Heading 4', i18n ) }</h4>
320+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
321+
</div>
322+
<div className="ugb-style-guide__typography-container">
323+
<h5>{ __( 'Heading 5', i18n ) }</h5>
324+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
325+
</div>
326+
<div className="ugb-style-guide__typography-container">
327+
<h6>{ __( 'Heading 6', i18n ) }</h6>
328+
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
329+
</div>
330+
<div className="ugb-style-guide__typography-container">
331+
<p>{ __( 'Body', i18n ) }</p>
332+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
333+
</div>
334+
<div className="ugb-style-guide__typography-container">
335+
<p>{ __( 'Subtitle', i18n ) }</p>
336+
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
337+
</div>
338+
<div className="ugb-style-guide__typography-container">
339+
<p>{ __( 'Button', i18n ) }</p>
340+
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
341+
</div>
342+
</div>
343+
</div>
344+
345+
<div className="ugb-style-guide__columns ugb-style-guide__typography-body">
346+
<div className="ugb-style-guide__column">
347+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Desktop', i18n ) }</h2>
348+
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
349+
<p>{ LONG_TEXT[ 0 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
350+
</div>
223351
<div className="ugb-style-guide__column">
224-
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Titles & Headings', i18n ) }</h2>
225-
<h1>{ __( 'Heading 1', i18n ) }</h1>
226-
<h2>{ __( 'Heading 2', i18n ) }</h2>
227-
<h3>{ __( 'Heading 3', i18n ) }</h3>
228-
<h4>{ __( 'Heading 4', i18n ) }</h4>
229-
<h5>{ __( 'Heading 5', i18n ) }</h5>
230-
<h6>{ __( 'Heading 6', i18n ) }</h6>
352+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Tablet', i18n ) }</h2>
353+
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
354+
<p>{ LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] } { LONG_TEXT[ 3 ] }</p>
231355
</div>
232356
<div className="ugb-style-guide__column">
233-
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Body Text', i18n ) }</h2>
234-
<p>{ LONG_TEXT[ 0 ] } { LONG_TEXT[ 1 ] }</p>
235-
<p>{ LONG_TEXT[ 2 ] } { LONG_TEXT[ 3 ] }</p>
357+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Mobile', i18n ) }</h2>
358+
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
359+
<p>{ LONG_TEXT[ 2 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
236360
</div>
237361
</div>
238362
</div>

0 commit comments

Comments
 (0)