Skip to content

Commit fac5039

Browse files
kaeizenkaeizen
committed
apply design system to web preview, display block styles
1 parent df9d43a commit fac5039

File tree

16 files changed

+981
-484
lines changed

16 files changed

+981
-484
lines changed

‎src/components/color-scheme-preview/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
1+
import { i18n } from 'stackable'
2+
13
import { Button, BaseControl } from '@wordpress/components'
4+
import { __ } from '@wordpress/i18n'
5+
26
import classnames from 'classnames'
7+
8+
export const COLOR_SCHEME_PROPERTY_LABELS = {
9+
backgroundColor: __( 'Background Color', i18n ),
10+
headingColor: __( 'Heading Color', i18n ),
11+
textColor: __( 'Text Color', i18n ),
12+
linkColor: __( 'Link Color', i18n ),
13+
accentColor: __( 'Accent Color', i18n ),
14+
buttonBackgroundColor: __( 'Button Color', i18n ),
15+
buttonTextColor: __( 'Button Text Color', i18n ),
16+
buttonOutlineColor: __( 'Button Outline Color', i18n ),
17+
}
18+
319
export const DEFAULT_COLOR_SCHEME_COLORS = {
420
backgroundColor: { desktop: '' },
521
headingColor: { desktop: '' },

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,5 +125,6 @@ export {
125125
default as ColorSchemePreview,
126126
ColorSchemePresetPicker,
127127
DEFAULT_COLOR_SCHEME_COLORS,
128+
COLOR_SCHEME_PROPERTY_LABELS,
128129
} from './color-scheme-preview'
129130
export { ColorSchemesHelp } from './color-schemes-help'

‎src/components/modal-design-library/modal.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export const ModalDesignLibrary = props => {
265265
className="ugb-modal-design-library__stk-color-scheme stk-color-scheme__toggle"
266266
>
267267
{ selectedBackgroundScheme !== ''
268-
? <ColorSchemePreview isCollapsed={ true } colors={ colorSchemesCollection[ selectedBackgroundScheme || backgroundModeColorScheme ].desktopColors } />
268+
? <ColorSchemePreview isCollapsed={ true } colors={ colorSchemesCollection[ selectedBackgroundScheme || backgroundModeColorScheme ].normal } />
269269
: <ColorSchemeTextItem label={ __( 'Default', i18n ) } />
270270
}
271271
</Button>
@@ -305,7 +305,7 @@ export const ModalDesignLibrary = props => {
305305
setSelectedBackgroundScheme( key )
306306
} }
307307
>
308-
<ColorSchemePreview colors={ scheme.desktopColors } isCollapsed={ true } />
308+
<ColorSchemePreview colors={ scheme.normal } isCollapsed={ true } />
309309
<span className="stk-color-scheme-name"> { scheme.name }</span>
310310
</Button>
311311
} ) }
@@ -331,7 +331,7 @@ export const ModalDesignLibrary = props => {
331331
className="ugb-modal-design-library__stk-color-scheme stk-color-scheme__toggle"
332332
>
333333
{ selectedContainerScheme !== ''
334-
? <ColorSchemePreview isCollapsed={ true } colors={ colorSchemesCollection[ selectedContainerScheme || containerModeColorScheme ].desktopColors } />
334+
? <ColorSchemePreview isCollapsed={ true } colors={ colorSchemesCollection[ selectedContainerScheme || containerModeColorScheme ].normal } />
335335
: <ColorSchemeTextItem label={ __( 'Default', i18n ) } />
336336
}
337337
</Button>
@@ -364,7 +364,7 @@ export const ModalDesignLibrary = props => {
364364
setSelectedContainerScheme( key )
365365
} }
366366
>
367-
<ColorSchemePreview colors={ scheme.desktopColors } isCollapsed={ true } />
367+
<ColorSchemePreview colors={ scheme.normal } isCollapsed={ true } />
368368
<span className="stk-color-scheme-name"> { scheme.name } </span>
369369
</Button>
370370
} ) }

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

Lines changed: 478 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 143 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,19 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
7777
display: flex;
7878
flex-direction: column;
7979
}
80+
81+
&,
82+
* {
83+
transition: all var(--stk-transition-duration, 0.12s) cubic-bezier(0.45, 0.05, 0.55, 0.95), margin 0s, flex 0s, max-width 0s, visibility 0s;
84+
}
8085
}
8186

8287
.ugb-style-guide__color-scheme {
8388
position: sticky;
8489
top: 0;
90+
&:hover {
91+
background-color: var(--hover-background-color) !important;
92+
}
8593
}
8694

8795
.ugb-style-guide__color-schemes {
@@ -102,6 +110,13 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
102110
}
103111
}
104112

113+
:where(.ugb-style-guide__color-scheme):hover :where(
114+
.ugb-style-guide__color-scheme__subtitle,
115+
.ugb-style-guide__color-scheme__heading,
116+
.ugb-style-guide__color-scheme__body) {
117+
color: var(--parent-hover-color) !important;
118+
}
119+
105120
:where(.ugb-style-guide__color-scheme__subtitle) {
106121
font-size: 14.22px;
107122
margin-bottom: 8px;
@@ -115,6 +130,10 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
115130
line-height: 1.2;
116131
}
117132

133+
:where(.ugb-style-guide__color-scheme):hover :where(.ugb-style-guide__color-scheme__body) a {
134+
color: var(--parent-hover-color) !important;
135+
}
136+
118137
:where(.ugb-style-guide__color-scheme__body) {
119138
font-size: 16px;
120139
line-height: 1.6;
@@ -123,39 +142,81 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
123142
}
124143
}
125144

126-
.ugb-style-guide__color-scheme__links {
145+
.ugb-style-guide__preview-button-group {
127146
display: flex;
128-
gap: 16px;
147+
column-gap: var(--stk-button-column-gap, 16px);
148+
row-gap: var(--stk-button-row-gap, 16px);
129149
margin-top: 32px;
130150
}
131151

132152
.ugb-style-guide__color-scheme__button,
133153
.ugb-style-guide__color-scheme__button--outline {
134-
padding: 12px 24px;
154+
padding: var(--stk-button-padding, 12px 24px);
155+
border-radius: var(--stk-button-border-radius, 4px);
135156
border: 0;
136-
border-radius: 4px;
157+
min-height: var(--stk-button-min-height, 0);
158+
cursor: pointer;
159+
position: relative;
160+
box-sizing: border-box;
161+
162+
&::before {
163+
border-radius: inherit;
164+
content: "";
165+
height: 100%;
166+
inset: 0;
167+
pointer-events: none;
168+
position: absolute;
169+
width: 100%;
170+
box-shadow: var(--stk-button-box-shadow, none);
171+
}
172+
}
173+
174+
:where(.ugb-style-guide__color-scheme):hover .ugb-style-guide__color-scheme__button {
175+
background-color: var(--parent-hover-background-color) !important;
176+
color: var(--parent-hover-color) !important;
137177
}
138178
.ugb-style-guide__color-scheme__button {
179+
background-color: var(--stk-button-background-color);
180+
color: var(--stk-button-text-color);
181+
&::before {
182+
border-style: var(--stk-button-border-style, none);
183+
border-width: var(--stk-button-border-width, 0);
184+
}
185+
139186
&:hover {
140-
background-color: var(--hover-background-color) !important;
141-
color: var(--hover-color) !important;
187+
background-color: var(--hover-background-color, var(--stk-button-background-color)) !important;
188+
color: var(--hover-color, var(--stk-button-text-color)) !important;
189+
}
190+
}
191+
:where(.ugb-style-guide__color-scheme):hover .ugb-style-guide__color-scheme__button--outline {
192+
color: var(--parent-hover-color) !important;
193+
&::before {
194+
border-color: var(--parent-hover-border-color) !important;
142195
}
143196
}
144197
.ugb-style-guide__color-scheme__button--outline {
145198
background: transparent;
146-
border-width: 2px;
147-
border-style: solid;
199+
color: var(--stk-button-outline-color);
200+
&::before {
201+
border-color: var(--stk-button-outline-color) !important;
202+
border-width: var(--stk-button-ghost-border-width, 2px);
203+
border-style: solid;
204+
}
148205
&:hover {
149-
border-color: var(--hover-border-color) !important;
150-
color: var(--hover-color) !important;
206+
color: var(--hover-color, var(--stk-button-outline-color)) !important;
207+
&::before {
208+
border-color: var(--hover-border-color, var(--stk-button-outline-color)) !important;
209+
}
151210
}
152211
}
153212

213+
154214
.ugb-style-guide__color-scheme__colors {
155215
p {
156216
margin: 0;
157217
line-height: 1.6;
158218
font-size: 14.22px;
219+
color: initial;
159220
}
160221
}
161222

@@ -215,7 +276,8 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
215276
.ugb-style-guide__typography-container {
216277
margin: 32px 0;
217278
> *:not(div) {
218-
line-height: 1;
279+
color: initial;
280+
line-height: normal;
219281
margin: 0 !important;
220282
}
221283
}
@@ -241,15 +303,22 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
241303
gap: 24px;
242304
}
243305

244-
.ugb-style-guide__elements__images img {
245-
width: 60%;
246-
height: auto;
306+
.ugb-style-guide__elements__images {
307+
.stk-img-wrapper:hover img {
308+
opacity: 1;
309+
}
310+
img {
311+
width: 60% !important;
312+
height: auto !important;
313+
}
247314
}
248315

249316
// Design System Preview
250317

251318
.ugb-style-guide__preview {
252-
border-radius: 16px;
319+
border-radius: var(--stk-block-background-border-radius, 16px);
320+
border-top-left-radius: 16px;
321+
border-top-right-radius: 16px;
253322
overflow: hidden;
254323
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
255324
}
@@ -282,61 +351,68 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
282351
inset-inline-start: 16px;
283352
}
284353

285-
.ugb-style-guide__preview-hero {
286-
// Fade the background image
287-
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--bg-image);
288-
background-size: cover;
289-
background-position: center;
290-
background-repeat: no-repeat;
291-
// TODO: These should all be the design system: background padding.
292-
padding: 100px 50px;
293-
text-align: center;
294-
color: #fff;
295-
}
296-
297-
.ugb-style-guide__preview-content {
298-
padding: 50px;
299-
// TODO: These should all be the design system: background padding.
300-
> h2,
301-
p {
302-
text-align: center;
354+
.ugb-style-guide__preview-root {
355+
.stk-img-wrapper:hover img {
356+
opacity: 1;
303357
}
304358
}
305-
.ugb-style-guide__preview-content__grid {
306-
margin-top: 36px;
307-
display: grid;
308-
grid-template-columns: 1fr 1fr 1fr;
309-
// TODO: These should all be the design system
310-
gap: 24px;
311-
}
312359

313-
.ugb-style-guide__preview-content__grid-item {
314-
text-align: center;
315-
// TODO: These should all be the design system for containers
316-
background: #fff;
317-
padding: 24px;
318-
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
319-
}
320-
321-
.ugb-style-guide__preview-content-2 {
322-
// TODO: These should all be the design system
323-
background: #eee;
324-
display: grid;
325-
grid-template-columns: 1fr 1fr;
326-
gap: 24px;
327-
padding: 50px;
328-
.ugb-style-guide__preview-content__media {
329-
img {
330-
object-fit: cover;
331-
width: 100%;
332-
height: 400px;
333-
// TODO: use image border radius and shadow
334-
}
335-
}
336-
.ugb-style-guide__preview-content__text {
337-
padding-top: 50px;
338-
}
339-
}
360+
.ugb-style-guide__preview-hero {
361+
// Fade the background image
362+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--bg-image);
363+
// background-size: cover;
364+
// background-position: center;
365+
// background-repeat: no-repeat;
366+
// min-height: 300px;
367+
// display: flex;
368+
// flex-direction: column;
369+
// justify-content: center;
370+
// padding: var(--stk-block-background-padding, 100px 50px);
371+
// text-align: center;
372+
// color: #fff;
373+
}
374+
375+
// .ugb-style-guide__preview-content {
376+
// padding: 50px;
377+
// // TODO: These should all be the design system: background padding.
378+
// > h2,
379+
// p {
380+
// text-align: center;
381+
// }
382+
// }
383+
// .ugb-style-guide__preview-content__grid {
384+
// margin-top: 36px;
385+
// display: grid;
386+
// grid-template-columns: 1fr 1fr 1fr;
387+
// // TODO: These should all be the design system
388+
// column-gap: var(--stk-columns-column-gap, 0px);
389+
// }
390+
391+
// .ugb-style-guide__preview-content__grid-item {
392+
// text-align: center;
393+
// margin: var(--stk-column-margin, 12px);
394+
// }
395+
396+
// .ugb-style-guide__preview-content-2 {
397+
// // TODO: These should all be the design system
398+
// background: #eee;
399+
// display: grid;
400+
// grid-template-columns: 1fr 1fr;
401+
// gap: 24px;
402+
// min-height: 500px;
403+
// align-content: center;
404+
// padding: var(--stk-block-background-padding, 50px);
405+
// .ugb-style-guide__preview-content__media {
406+
// img {
407+
// object-fit: cover;
408+
// width: 100%;
409+
// height: 400px;
410+
// }
411+
// }
412+
// .ugb-style-guide__preview-content__text {
413+
// padding-top: 50px;
414+
// }
415+
// }
340416
}
341417
.ugb-style-guide-popover__heading {
342418
margin: 70px 70px 0;

0 commit comments

Comments
 (0)