Skip to content

Commit 8a6c69a

Browse files
kaeizenkaeizen
committed
display typography styles
1 parent 02490b3 commit 8a6c69a

File tree

8 files changed

+210
-184
lines changed

8 files changed

+210
-184
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,20 +102,20 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
102102
}
103103
}
104104

105-
.ugb-style-guide__color-scheme__subtitle {
105+
:where(.ugb-style-guide__color-scheme__subtitle) {
106106
font-size: 14.22px;
107107
margin-bottom: 8px;
108108
line-height: 1;
109109
}
110110

111-
.ugb-style-guide__color-scheme__heading {
111+
:where(.ugb-style-guide__color-scheme__heading) {
112112
font-size: 28.83px;
113113
font-weight: 600;
114114
margin-bottom: 16px;
115115
line-height: 1.2;
116116
}
117117

118-
.ugb-style-guide__color-scheme__body {
118+
:where(.ugb-style-guide__color-scheme__body) {
119119
font-size: 16px;
120120
line-height: 1.6;
121121
a:hover {

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

Lines changed: 65 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
/**
2020
* WordPress dependencies
2121
*/
22-
import { __ } from '@wordpress/i18n'
22+
import { __, sprintf } from '@wordpress/i18n'
2323
// import { RawHTML } from '@wordpress/element'
2424
// import { createBlock, serialize } from '@wordpress/blocks'
2525

@@ -139,16 +139,20 @@ const StyleGuide = props => {
139139
const {
140140
colors,
141141
colorSchemes = DUMMY_COLOR_SCHEMES,
142+
typography = {
143+
desktop: [], tablet: [], mobile: [],
144+
},
145+
designSystemStyles = '',
142146
} = designSystem
143147

144148
return (
145149
<>
146150
<div className="ugb-style-guide">
147151
<div className="ugb-style-guide__content" ref={ contentRef }>
148-
152+
<style>{ designSystemStyles }</style>
149153
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Colors', i18n ) }</h1>
150154

151-
{ /* 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. */ }
155+
{ /* 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. className="ugb-style-guide__typography-preview" data-device="desktop" */ }
152156
{ colorSchemes && <>
153157
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Color Schemes', i18n ) }</h2>
154158
<div className="ugb-style-guide__columns ugb-style-guide__color-schemes">
@@ -158,10 +162,10 @@ const StyleGuide = props => {
158162
<h2 className="ugb-style-guide__color-scheme-title ugb-style-guide__title ugb-style-guide__color-label">{ colorScheme.name }</h2>
159163
<div className="ugb-style-guide__color-scheme ugb-style-guide__color-container" style={ { backgroundColor: colorScheme.backgroundColor.color } }>
160164
{ /* TODO: Kae: the fonts and sizes here should be based on the design system */ }
161-
<div className="ugb-style-guide__color-scheme__subtitle" style={ { color: colorScheme.accentColor.color } }>{ __( 'Subtitle', i18n ) }</div>
162-
<div className="ugb-style-guide__color-scheme__heading" style={ { color: colorScheme.headingColor.color } }>{ __( 'Headings', i18n ) }</div>
165+
<div className="ugb-style-guide__color-scheme__subtitle stk-subtitle ugb-style-guide__typography-preview" data-device="desktop" style={ { color: colorScheme.accentColor.color } }>{ __( 'Subtitle', i18n ) }</div>
166+
<h2 className="ugb-style-guide__color-scheme__heading ugb-style-guide__typography-preview" data-device="desktop" style={ { color: colorScheme.headingColor.color } }>{ __( 'Headings', i18n ) }</h2>
163167

164-
<div className="ugb-style-guide__color-scheme__body" style={ { color: colorScheme.textColor.color } }>
168+
<p className="ugb-style-guide__color-scheme__body ugb-style-guide__typography-preview" data-device="desktop" style={ { color: colorScheme.textColor.color } }>
165169
{ LONG_TEXT[ i % 6 ] }
166170
&nbsp;
167171
{ LONG_TEXT[ ( i + 1 ) % 6 ] }
@@ -175,7 +179,7 @@ const StyleGuide = props => {
175179
} }>
176180
{ __( 'Link', i18n ) }
177181
</a>
178-
</div>
182+
</p>
179183

180184
{ /* TODO: Kae: the button looks here should be based on the design system */ }
181185
<div className="ugb-style-guide__color-scheme__links">
@@ -185,14 +189,14 @@ const StyleGuide = props => {
185189
color: colorScheme.buttonTextColor.color,
186190
'--hover-background-color': colorScheme.buttonColor.hoverColor || colorScheme.buttonColor.color,
187191
'--hover-color': colorScheme.buttonTextColor.hoverColor || colorScheme.buttonTextColor.color,
188-
} }>{ __( 'Button', i18n ) }</button>
192+
} }><span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device="desktop">{ __( 'Button', i18n ) }</span></button>
189193

190194
<button className="ugb-style-guide__color-scheme__button--outline" style={ {
191195
borderColor: colorScheme.buttonOutlineColor.color,
192196
color: colorScheme.buttonOutlineColor.color,
193197
'--hover-border-color': colorScheme.buttonOutlineColor.hoverColor || colorScheme.buttonOutlineColor.color,
194198
'--hover-color': colorScheme.buttonOutlineColor.hoverColor || colorScheme.buttonOutlineColor.color,
195-
} }>{ __( 'Button', i18n ) }</button>
199+
} }><span className="stk-button__inner-text ugb-style-guide__typography-preview" data-device="desktop">{ __( 'Button', i18n ) }</span></button>
196200

197201
</div>
198202
</div>
@@ -242,140 +246,78 @@ const StyleGuide = props => {
242246

243247
<div className="ugb-style-guide__column">
244248
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Desktop', i18n ) }</h2>
245-
<div className="ugb-style-guide__typography-container">
246-
<h1>{ __( 'Heading 1', i18n ) }</h1>
247-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
248-
</div>
249-
<div className="ugb-style-guide__typography-container">
250-
<h2>{ __( 'Heading 2', i18n ) }</h2>
251-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
252-
</div>
253-
<div className="ugb-style-guide__typography-container">
254-
<h3>{ __( 'Heading 3', i18n ) }</h3>
255-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
256-
</div>
257-
<div className="ugb-style-guide__typography-container">
258-
<h4>{ __( 'Heading 4', i18n ) }</h4>
259-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
260-
</div>
261-
<div className="ugb-style-guide__typography-container">
262-
<h5>{ __( 'Heading 5', i18n ) }</h5>
263-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
264-
</div>
265-
<div className="ugb-style-guide__typography-container">
266-
<h6>{ __( 'Heading 6', i18n ) }</h6>
267-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
268-
</div>
269-
<div className="ugb-style-guide__typography-container">
270-
<p>{ __( 'Body', i18n ) }</p>
271-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
272-
</div>
273-
<div className="ugb-style-guide__typography-container">
274-
<p>{ __( 'Subtitle', i18n ) }</p>
275-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
276-
</div>
277-
<div className="ugb-style-guide__typography-container">
278-
<p>{ __( 'Button', i18n ) }</p>
279-
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
280-
</div>
249+
{ typography.desktop.length > 0 && typography.desktop.map( ( [ element, description ], i ) => {
250+
const Tag = element.startsWith( 'h' ) ? element : 'p'
251+
const classname = i === 7 ? 'stk-subtitle' : i === 8 ? 'stk-button__inner-text' : ''
252+
253+
const label = i < 6 ? sprintf( __( 'Heading %d', i18n ), i + 1 )
254+
: i === 6 ? __( 'Body', i18n )
255+
: i === 7 ? __( 'Subtitle', i18n )
256+
: __( 'Button', i18n )
257+
258+
return (
259+
<div key={ i } className="ugb-style-guide__typography-container">
260+
<Tag className={ `ugb-style-guide__typography-preview ${ classname }` } data-device="desktop">{ label }</Tag>
261+
<div className="ugb-style-guide__typography-label">{ description }</div>
262+
</div>
263+
)
264+
} ) }
281265
</div>
282266

283267
<div className="ugb-style-guide__column">
284268
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Tablet', i18n ) }</h2>
285-
<div className="ugb-style-guide__typography-container">
286-
<h1>{ __( 'Heading 1', i18n ) }</h1>
287-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
288-
</div>
289-
<div className="ugb-style-guide__typography-container">
290-
<h2>{ __( 'Heading 2', i18n ) }</h2>
291-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
292-
</div>
293-
<div className="ugb-style-guide__typography-container">
294-
<h3>{ __( 'Heading 3', i18n ) }</h3>
295-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
296-
</div>
297-
<div className="ugb-style-guide__typography-container">
298-
<h4>{ __( 'Heading 4', i18n ) }</h4>
299-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
300-
</div>
301-
<div className="ugb-style-guide__typography-container">
302-
<h5>{ __( 'Heading 5', i18n ) }</h5>
303-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
304-
</div>
305-
<div className="ugb-style-guide__typography-container">
306-
<h6>{ __( 'Heading 6', i18n ) }</h6>
307-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
308-
</div>
309-
<div className="ugb-style-guide__typography-container">
310-
<p>{ __( 'Body', i18n ) }</p>
311-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
312-
</div>
313-
<div className="ugb-style-guide__typography-container">
314-
<p>{ __( 'Subtitle', i18n ) }</p>
315-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
316-
</div>
317-
<div className="ugb-style-guide__typography-container">
318-
<p>{ __( 'Button', i18n ) }</p>
319-
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
320-
</div>
269+
{ typography.tablet.length > 0 && typography.tablet.map( ( [ element, description ], i ) => {
270+
const Tag = element.startsWith( 'h' ) ? element : 'p'
271+
const classname = i === 7 ? 'stk-subtitle' : i === 8 ? 'stk-button__inner-text' : ''
272+
const label = i < 6 ? sprintf( __( 'Heading %d', i18n ), i + 1 )
273+
: i === 6 ? __( 'Body', i18n )
274+
: i === 7 ? __( 'Subtitle', i18n )
275+
: __( 'Button', i18n )
276+
277+
return (
278+
<div key={ i } className="ugb-style-guide__typography-container">
279+
<Tag className={ `ugb-style-guide__typography-preview ${ classname }` } data-device="tablet">{ label }</Tag>
280+
<div className="ugb-style-guide__typography-label">{ description }</div>
281+
</div>
282+
)
283+
} ) }
321284
</div>
322285

323286
<div className="ugb-style-guide__column">
324287
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Mobile', i18n ) }</h2>
325-
<div className="ugb-style-guide__typography-container">
326-
<h1>{ __( 'Heading 1', i18n ) }</h1>
327-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
328-
</div>
329-
<div className="ugb-style-guide__typography-container">
330-
<h2>{ __( 'Heading 2', i18n ) }</h2>
331-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
332-
</div>
333-
<div className="ugb-style-guide__typography-container">
334-
<h3>{ __( 'Heading 3', i18n ) }</h3>
335-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
336-
</div>
337-
<div className="ugb-style-guide__typography-container">
338-
<h4>{ __( 'Heading 4', i18n ) }</h4>
339-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
340-
</div>
341-
<div className="ugb-style-guide__typography-container">
342-
<h5>{ __( 'Heading 5', i18n ) }</h5>
343-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
344-
</div>
345-
<div className="ugb-style-guide__typography-container">
346-
<h6>{ __( 'Heading 6', i18n ) }</h6>
347-
<div className="ugb-style-guide__typography-label">DM Sans / Bold / 36px</div>
348-
</div>
349-
<div className="ugb-style-guide__typography-container">
350-
<p>{ __( 'Body', i18n ) }</p>
351-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
352-
</div>
353-
<div className="ugb-style-guide__typography-container">
354-
<p>{ __( 'Subtitle', i18n ) }</p>
355-
<div className="ugb-style-guide__typography-label">System Font / Normal / 16px</div>
356-
</div>
357-
<div className="ugb-style-guide__typography-container">
358-
<p>{ __( 'Button', i18n ) }</p>
359-
<div className="ugb-style-guide__typography-label">System Font / Bold / 16px</div>
360-
</div>
288+
{ typography.mobile.length > 0 && typography.mobile.map( ( [ element, description ], i ) => {
289+
const Tag = element.startsWith( 'h' ) ? element : 'p'
290+
const classname = i === 7 ? 'stk-subtitle' : i === 8 ? 'stk-button__inner-text' : ''
291+
const label = i < 6 ? sprintf( __( 'Heading %d', i18n ), i + 1 )
292+
: i === 6 ? __( 'Body', i18n )
293+
: i === 7 ? __( 'Subtitle', i18n )
294+
: __( 'Button', i18n )
295+
296+
return (
297+
<div key={ i } className="ugb-style-guide__typography-container">
298+
<Tag className={ `ugb-style-guide__typography-preview ${ classname }` } data-device="mobile">{ label }</Tag>
299+
<div className="ugb-style-guide__typography-label">{ description }</div>
300+
</div>
301+
)
302+
} ) }
361303
</div>
362304
</div>
363305

364306
<div className="ugb-style-guide__columns ugb-style-guide__typography-body">
365307
<div className="ugb-style-guide__column">
366308
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Desktop', i18n ) }</h2>
367-
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
368-
<p>{ LONG_TEXT[ 0 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
309+
<h2 className="ugb-style-guide__typography-preview" data-device="desktop">{ __( 'Built on the Moments Between', i18n ) }</h2>
310+
<p className="ugb-style-guide__typography-preview" data-device="desktop">{ LONG_TEXT[ 0 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
369311
</div>
370312
<div className="ugb-style-guide__column">
371313
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Tablet', i18n ) }</h2>
372-
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
373-
<p>{ LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] } { LONG_TEXT[ 3 ] }</p>
314+
<h2 className="ugb-style-guide__typography-preview" data-device="tablet">{ __( 'Built on the Moments Between', i18n ) }</h2>
315+
<p className="ugb-style-guide__typography-preview" data-device="tablet">{ LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] } { LONG_TEXT[ 3 ] }</p>
374316
</div>
375317
<div className="ugb-style-guide__column">
376318
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Mobile', i18n ) }</h2>
377-
<h2>{ __( 'Built on the Moments Between', i18n ) }</h2>
378-
<p>{ LONG_TEXT[ 2 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
319+
<h2 className="ugb-style-guide__typography-preview" data-device="mobile">{ __( 'Built on the Moments Between', i18n ) }</h2>
320+
<p className="ugb-style-guide__typography-preview" data-device="mobile">{ LONG_TEXT[ 2 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
379321
</div>
380322
</div>
381323

‎src/hooks/use-design-system.js‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,48 @@
11
import { useSelect } from '@wordpress/data'
2+
import { omit } from 'lodash'
3+
import { generateStyles } from '~stackable/block-components'
4+
import { createTypographyDescription, createTypographyStyles } from '~stackable/util'
25

36
export const useDesignSystem = () => {
4-
const { colors } = useSelect( select => {
7+
const {
8+
colors, typography, designSystemStyles,
9+
} = useSelect( select => {
510
const colors = select( 'stackable/global-colors' ).getSettings().stackableColors || []
11+
const _typography = select( 'stackable/global-typography' ).getSettings() || {}
12+
13+
const stylesObject = {}
14+
const typography = {
15+
desktop: [],
16+
tablet: [],
17+
mobile: [],
18+
}
19+
20+
const typographySelectors = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', '.stk-subtitle', '.stk-button__inner-text' ]
21+
typographySelectors.forEach( key => {
22+
if ( _typography[ key ] ) {
23+
const value = _typography[ key ]
24+
const stylesForPreview = omit( value, [ 'lineHeight', 'tabletLineHeight', 'mobileLineHeight' ] )
25+
stylesObject[ `${ key }.ugb-style-guide__typography-preview` ] = createTypographyStyles( '%s', 'desktop', value, { important: false } )
26+
stylesObject[ `${ key }.ugb-style-guide__typography-preview:not([data-device="desktop"]) ` ] = createTypographyStyles( '%s', 'tablet', value, { important: false } )
27+
stylesObject[ `${ key }.ugb-style-guide__typography-preview[data-device="mobile"] ` ] = createTypographyStyles( '%s', 'mobile', value, { important: false } )
28+
typography.desktop.push( [ key, createTypographyDescription( stylesForPreview, 'desktop', ' / ' ) ] )
29+
typography.tablet.push( [ key, createTypographyDescription( stylesForPreview, 'tablet', ' / ' ) ] )
30+
typography.mobile.push( [ key, createTypographyDescription( stylesForPreview, 'mobile', ' / ' ) ] )
31+
}
32+
} )
33+
34+
const designSystemStyles = generateStyles( stylesObject, '' ).join( '' )
635

736
// TODO: get other settings in the design system
837

9-
return { colors }
38+
return {
39+
colors, typography, designSystemStyles,
40+
}
1041
}, [] )
1142

1243
return {
1344
colors,
45+
typography,
46+
designSystemStyles,
1447
}
1548
}

‎src/plugins/global-settings/typography/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
cleanTypographyStyle,
1212
getTypographyTypeScale,
1313
} from './utils'
14+
import './store'
1415

1516
/**
1617
* External dependencies
@@ -43,7 +44,7 @@ import {
4344
addFilter, applyFilters, doAction,
4445
} from '@wordpress/hooks'
4546
import { __, sprintf } from '@wordpress/i18n'
46-
import { useSelect } from '@wordpress/data'
47+
import { dispatch, useSelect } from '@wordpress/data'
4748

4849
export { GlobalTypographyStyles }
4950

@@ -182,6 +183,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
182183
fetchSettings().then( response => {
183184
// Get settings.
184185
const _typographySettings = ( head( response.stackable_global_typography ) ) || {}
186+
185187
setTypographySettings( _typographySettings )
186188
setApplySettingsTo( response.stackable_global_typography_apply_to || 'blocks-stackable-native' )
187189
setCustomFontPairs( response.stackable_custom_font_pairs || [] )
@@ -195,6 +197,8 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
195197
setSelectedTypeScale( {
196198
desktop: typeScaleDesktop, tablet: typeScaleTablet, mobile: typeScaleMobile,
197199
} )
200+
201+
dispatch( 'stackable/global-typography' ).updateSettings( _typographySettings )
198202
} )
199203
}, [] )
200204

@@ -241,6 +245,8 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
241245
} )
242246
model.save()
243247
}, 500 )
248+
249+
dispatch( 'stackable/global-typography' ).updateSettings( newSettings )
244250
}
245251

246252
const updateSelectedFontPair = name => {

0 commit comments

Comments
 (0)