display global color palette in the style guide

Author: kaeizen

src/components/style-guide/editor.scss

@@ -36,6 +36,15 @@
 		font-size: 1em;
 		font-weight: 500;
 		line-height: 1;
+
+		p:first-child {
+			margin: 0;
+		}
+
+		p:last-child {
+			margin-top: 4px;
+			margin-bottom: 0;
+		}
 	}
 
 	.ugb-style-guide__colors {

src/components/style-guide/index.js

@@ -23,7 +23,11 @@ import { createBlock, serialize } from '@wordpress/blocks'
 export { default as StyleGuidePopover } from './popover'
 
 // TODO: This is not yet finished
-const StyleGuide = () => {
+const StyleGuide = props => {
+	const { designSystem } = props
+
+	const { colors } = designSystem
+
 	const styleGuideRef = useRef( null )
 
 	return (
@@ -35,41 +39,14 @@ const StyleGuide = () => {
 					<h1 className="ugb-style-guide__section-title">{ __( 'Colors', i18n ) }</h1>
 					<h2 className="ugb-style-guide__section-subheading">{ __( 'Color Palette', i18n ) }</h2>
 					<div className="ugb-style-guide__columns ugb-style-guide__colors">
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#f00069' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#f00069' ) ? '#fff' : '#000' } }>
-								#F00069
-							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#111' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#111' ) ? '#fff' : '#000' } }>
-								#111111
-							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#222' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#222' ) ? '#fff' : '#000' } }>
-								#222222
-							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#333' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#333' ) ? '#fff' : '#000' } }>
-								#333333
+						{ colors.map( ( color, key ) => {
+							return <div key={ key } className="ugb-style-guide__column" style={ { backgroundColor: color.color } }>
+								<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( color.color ) ? '#fff' : '#000' } }>
+									<p> { color.name } </p>
+									<p> { color.color } </p>
+								</div>
 							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#444' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#444' ) ? '#fff' : '#000' } }>
-								#444444
-							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#555' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#555' ) ? '#fff' : '#000' } }>
-								#555555
-							</div>
-						</div>
-						<div className="ugb-style-guide__column" style={ { backgroundColor: '#666' } }>
-							<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#666' ) ? '#fff' : '#000' } }>
-								#666666
-							</div>
-						</div>
+						} ) }
 					</div>
 
 					<h2 className="ugb-style-guide__section-subheading">{ __( 'Color Schemes', i18n ) }</h2>

src/components/style-guide/popover.js

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n'
 import { useMemo } from '@wordpress/element'
 import { Popover, Button } from '@wordpress/components'
 import { Icon, close as closeIcon } from '@wordpress/icons'
+import { useDesignSystem } from '~stackable/hooks'
 
 const StyleGuidePopover = props => {
 	const { onClose } = props
@@ -25,6 +26,8 @@ const StyleGuidePopover = props => {
 		return [ el, el?.offsetWidth, el?.offsetHeight ]
 	}, [] )
 
+	const designSystem = useDesignSystem()
+
 	const style = width && height ? { '--width': `${ width }px`, '--height': `${ height }px` } : {}
 
 	return (
@@ -42,7 +45,7 @@ const StyleGuidePopover = props => {
 				<Icon icon={ closeIcon } />
 			</Button>
 			<h1 className="ugb-style-guide-popover__title">{ __( 'Design System Style Guide', i18n ) }</h1>
-			<StyleGuide { ...props } />
+			<StyleGuide { ...props } designSystem={ designSystem } />
 		</Popover>
 	)
 }

src/hooks/index.js

@@ -21,3 +21,4 @@ export * from './use-global-block-layout-defaults'
 export * from './use-block-color-schemes'
 export * from './use-preset-controls'
 export * from './use-block-style-context'
+export * from './use-design-system'

src/hooks/use-design-system.js

@@ -0,0 +1,15 @@
+import { useSelect } from '@wordpress/data'
+
+export const useDesignSystem = () => {
+	const { colors } = useSelect( select => {
+		const colors = select( 'stackable/global-colors' ).getSettings().stackableColors || []
+
+		// TODO: get other settings in the design system
+
+		return { colors }
+	}, [] )
+
+	return {
+		colors,
+	}
+}