Skip to content

Commit e29e62d

Browse files
treodentreoden
committed
feat(storefront): re-skin the default frontStore theme
1 parent 861f955 commit e29e62d

74 files changed

Lines changed: 1577 additions & 1410 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/evershop/src/components/common/Editor.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,28 @@
22
margin-top: 1rem;
33
margin-bottom: 1rem;
44
}
5+
6+
/* Tailwind `prose` sizes only h1–h4 (and leaves h4 at body size), so h5/h6
7+
render identically to body text. Restore the theme's descending scale for the
8+
lower headings in editor content. Scoped under `.editor__html .prose` so it
9+
outranks prose's `:where()` element rules without touching global headings. */
10+
.editor__html .prose {
11+
h4 {
12+
font-size: 1.125rem;
13+
line-height: 1.3;
14+
}
15+
h5 {
16+
font-size: 1rem;
17+
font-weight: 600;
18+
line-height: 1.4;
19+
margin-top: 1.5rem;
20+
margin-bottom: 0.5rem;
21+
}
22+
h6 {
23+
font-size: 0.875rem;
24+
font-weight: 600;
25+
line-height: 1.4;
26+
margin-top: 1.5rem;
27+
margin-bottom: 0.5rem;
28+
}
29+
}

‎packages/evershop/src/components/common/Editor.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,12 @@ const List: React.FC<{
2727
return (
2828
<ListTag>
2929
{data.items.map((item, index) => (
30-
<li key={index}>{item}</li>
30+
// Items may carry inline formatting (bold/italic/links) as HTML, same
31+
// as a paragraph — render it (sanitized) rather than as literal text.
32+
<li
33+
key={index}
34+
dangerouslySetInnerHTML={{ __html: sanitize(item) }}
35+
/>
3136
))}
3237
</ListTag>
3338
);
@@ -37,8 +42,10 @@ const Quote: React.FC<{ data: { text: string; caption?: string } }> = ({
3742
data
3843
}) => {
3944
return (
45+
// `prose` already adds typographic quotation marks around blockquote text
46+
// via ::before/::after — don't add literal ones here or they double up.
4047
<blockquote>
41-
<p>&quot;{data.text}&quot;</p>
48+
<p>{data.text}</p>
4249
{data.caption && <cite>- {data.caption}</cite>}
4350
</blockquote>
4451
);

‎packages/evershop/src/components/frontStore/Footer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ interface FooterProps {
77

88
export function Footer({ copyRight }: FooterProps) {
99
return (
10-
<footer className="footer bg-gray-100 mt-24 pt-2.5 pb-2.5 border-t border-gray-300">
10+
<footer className="footer mt-20 border-t border-border bg-muted/30 pt-14 pb-8">
1111
<Area
1212
id="footerTop"
1313
className="footer__top"
1414
isGlobal
1515
editableInPageBuilder
1616
/>
17-
<div className="footer__middle flex justify-between items-center">
17+
<div className="footer__middle page-width flex flex-wrap items-start justify-between gap-10">
1818
<Area
1919
id="footerMiddleLeft"
2020
className="footer__middle__left"
@@ -36,7 +36,7 @@ export function Footer({ copyRight }: FooterProps) {
3636
</div>
3737
<Area
3838
id="footerBottom"
39-
className="footer__bottom"
39+
className="footer__bottom mt-12 border-t border-border pt-6"
4040
isGlobal
4141
editableInPageBuilder
4242
coreComponents={[
@@ -130,7 +130,7 @@ export function Footer({ copyRight }: FooterProps) {
130130
</div>
131131
</div>
132132
<div className="self-center">
133-
<div className="copyright text-center md:text-right text-textSubdued">
133+
<div className="copyright text-center text-sm text-muted-foreground md:text-right">
134134
<span>{copyRight}</span>
135135
</div>
136136
</div>

‎packages/evershop/src/components/frontStore/Header.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.header {
2-
padding: 1rem;
3-
border-bottom: 1px solid #ebebeb;
4-
@media only screen and (min-width: 1200px) {
5-
padding-left: 50px;
6-
padding-right: 50px;
7-
}
2+
/* Re-skin (2026-07-10): token border; horizontal padding + width now come
3+
* from `.page-width` on header__middle, vertical from `py-4`. */
4+
border-bottom: 1px solid var(--border);
85
}

‎packages/evershop/src/components/frontStore/Header.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,32 @@ import React from 'react';
33

44
export function Header() {
55
return (
6-
<header className="header">
6+
<header className="header bg-background">
7+
{/* Announcement bar area (Announcement bar widget lands here). */}
78
<Area
89
id="headerTop"
910
className="header__top"
1011
isGlobal
1112
editableInPageBuilder
1213
/>
13-
<div className="header__middle grid grid-cols-3 px-6 py-3">
14+
{/* Re-skin (2026-07-10): reference layout — logo left, nav beside it,
15+
search / account / cart pushed right, constrained to the page width. */}
16+
<div className="header__middle page-width flex items-center gap-6 py-4">
1417
<Area
15-
id="headerMiddleLeft"
16-
className="header__middle__left flex justify-start items-center"
18+
id="headerMiddleCenter"
19+
className="header__middle__center flex shrink-0 items-center"
1720
isGlobal
1821
editableInPageBuilder
1922
/>
2023
<Area
21-
id="headerMiddleCenter"
22-
className="header__middle__center flex justify-center items-center"
24+
id="headerMiddleLeft"
25+
className="header__middle__left flex items-center order-first md:order-none"
2326
isGlobal
2427
editableInPageBuilder
2528
/>
2629
<Area
2730
id="headerMiddleRight"
28-
className="header__middle__right flex justify-end items-center gap-3"
31+
className="header__middle__right ml-auto flex items-center gap-1"
2932
isGlobal
3033
editableInPageBuilder
3134
/>

‎packages/evershop/src/components/frontStore/Pagination.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -441,20 +441,20 @@ export const CompactPaginationRenderer: React.FC<{
441441
<div
442442
className={`compact-pagination flex items-center justify-between ${className}`}
443443
>
444-
<div className="pagination-info text-sm text-gray-600">
444+
<div className="pagination-info text-sm text-muted-foreground">
445445
{_('Showing ${showing} of ${total}', { showing, total })}
446446
</div>
447447

448448
<div className="pagination-controls flex items-center space-x-2">
449449
<button
450450
onClick={goToPrev}
451451
disabled={!hasPrev || isLoading}
452-
className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
452+
className="px-3 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
453453
>
454454
{_('Previous')}
455455
</button>
456456

457-
<span className="text-sm text-gray-600">
457+
<span className="text-sm text-muted-foreground">
458458
{_('Page ${currentPage} of ${totalPages}', {
459459
currentPage: currentPage.toString(),
460460
totalPages: totalPages.toString()
@@ -464,7 +464,7 @@ export const CompactPaginationRenderer: React.FC<{
464464
<button
465465
onClick={goToNext}
466466
disabled={!hasNext || isLoading}
467-
className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
467+
className="px-3 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
468468
>
469469
{_('Next')}
470470
</button>
@@ -507,23 +507,23 @@ export const InputPaginationRenderer: React.FC<{
507507

508508
return (
509509
<div className={`input-pagination ${className}`}>
510-
<div className="text-center text-sm text-gray-600 mb-4">
510+
<div className="text-center text-sm text-muted-foreground mb-4">
511511
{getDisplayText()}
512512
</div>
513513

514514
<div className="flex items-center justify-center space-x-4">
515515
<button
516516
onClick={goToFirst}
517517
disabled={!hasPrev || isLoading}
518-
className="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
518+
className="px-2 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50"
519519
>
520520
{_('First')}
521521
</button>
522522

523523
<button
524524
onClick={goToPrev}
525525
disabled={!hasPrev || isLoading}
526-
className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
526+
className="px-3 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50"
527527
>
528528
←
529529
</button>
@@ -539,7 +539,7 @@ export const InputPaginationRenderer: React.FC<{
539539
max={totalPages}
540540
value={inputPage}
541541
onChange={(e) => setInputPage(e.target.value)}
542-
className="w-16 px-2 py-1 text-sm border border-gray-300 rounded text-center"
542+
className="w-16 px-2 py-1 text-sm border border-border rounded text-center"
543543
disabled={isLoading}
544544
/>
545545
<span className="text-sm">
@@ -557,15 +557,15 @@ export const InputPaginationRenderer: React.FC<{
557557
<button
558558
onClick={goToNext}
559559
disabled={!hasNext || isLoading}
560-
className="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
560+
className="px-3 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50"
561561
>
562562
→
563563
</button>
564564

565565
<button
566566
onClick={goToLast}
567567
disabled={!hasNext || isLoading}
568-
className="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
568+
className="px-2 py-1 text-sm border border-border rounded hover:bg-muted disabled:opacity-50"
569569
>
570570
{_('Last')}
571571
</button>

‎packages/evershop/src/components/frontStore/blog/BlogPagination.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@ export function BlogPagination({
2020
}
2121

2222
const linkClass =
23-
'border border-gray-300 rounded px-3 py-1 hover:bg-gray-100 text-sm';
24-
const disabledClass = 'text-gray-300 px-3 py-1 text-sm';
23+
'border border-border rounded-md px-3 py-1.5 hover:bg-muted text-sm transition-colors';
24+
const disabledClass = 'text-muted-foreground/40 px-3 py-1.5 text-sm';
2525

2626
return (
27-
<nav className="blog-pagination flex items-center justify-center gap-4 mt-10">
27+
<nav className="blog-pagination flex items-center justify-center gap-4 mt-12">
2828
{currentPage > 1 ? (
2929
<a href={`?page=${currentPage - 1}`} className={linkClass}>
3030
{_('Previous')}
3131
</a>
3232
) : (
3333
<span className={disabledClass}>{_('Previous')}</span>
3434
)}
35-
<span className="text-sm text-gray-500">
35+
<span className="text-sm text-muted-foreground">
3636
{_('Page')} {currentPage} / {totalPages}
3737
</span>
3838
{currentPage < totalPages ? (

‎packages/evershop/src/components/frontStore/blog/CommentSection.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,23 +56,23 @@ function CommentItem({
5656
};
5757

5858
return (
59-
<div className={depth > 0 ? 'ml-6 mt-4 border-l border-gray-200 pl-4' : 'mt-6'}>
59+
<div className={depth > 0 ? 'ml-6 mt-4 border-l border-border pl-4' : 'mt-6'}>
6060
<div className="flex items-center gap-2 text-sm">
6161
<span className="font-medium">{comment.name}</span>
6262
{comment.createdAt && (
63-
<span className="text-gray-400">
63+
<span className="text-muted-foreground">
6464
{new Date(comment.createdAt).toLocaleDateString()}
6565
</span>
6666
)}
6767
</div>
68-
<div className="text-gray-700 mt-1">
68+
<div className="text-foreground mt-1">
6969
<CommentText text={comment.comment} />
7070
</div>
71-
<div className="flex gap-4 mt-1 text-sm text-gray-500">
71+
<div className="flex gap-4 mt-1 text-sm text-muted-foreground">
7272
<button
7373
type="button"
7474
onClick={like}
75-
className={liked ? 'text-blue-600' : 'hover:underline'}
75+
className={liked ? 'text-foreground font-medium' : 'hover:underline'}
7676
>
7777
♥ {likeCount}
7878
</button>
@@ -178,14 +178,16 @@ export function CommentSection({
178178
{_('Comments')} ({total})
179179
</h2>
180180
{comments.length === 0 && (
181-
<p className="text-gray-500">{_('No comments yet. Be the first!')}</p>
181+
<p className="text-muted-foreground">
182+
{_('No comments yet. Be the first!')}
183+
</p>
182184
)}
183185
{comments.map((c) => (
184186
<CommentItem key={c.uuid} comment={c} depth={0} onReply={setReplyTo} />
185187
))}
186188

187189
<form onSubmit={submit} className="mt-8 space-y-3">
188-
<h3 className="text-lg font-semibold">
190+
<h3 className="h4">
189191
{replyTo
190192
? _('Reply to ${name}', { name: replyTo.name })
191193
: _('Leave a comment')}
@@ -194,7 +196,7 @@ export function CommentSection({
194196
<button
195197
type="button"
196198
onClick={() => setReplyTo(null)}
197-
className="text-sm text-blue-600"
199+
className="text-sm text-muted-foreground hover:text-foreground"
198200
>
199201
{_('Cancel reply')}
200202
</button>
@@ -214,15 +216,15 @@ export function CommentSection({
214216
placeholder={_('Name')}
215217
value={form.name}
216218
onChange={(e) => setForm({ ...form, name: e.target.value })}
217-
className="border border-gray-300 rounded px-3 py-2"
219+
className="border border-border rounded-md px-3 py-2"
218220
/>
219221
<input
220222
required
221223
type="email"
222224
placeholder={_('Email (not published)')}
223225
value={form.email}
224226
onChange={(e) => setForm({ ...form, email: e.target.value })}
225-
className="border border-gray-300 rounded px-3 py-2"
227+
className="border border-border rounded-md px-3 py-2"
226228
/>
227229
</div>
228230
<textarea
@@ -231,7 +233,7 @@ export function CommentSection({
231233
value={form.comment}
232234
onChange={(e) => setForm({ ...form, comment: e.target.value })}
233235
rows={4}
234-
className="w-full border border-gray-300 rounded px-3 py-2"
236+
className="w-full border border-border rounded-md px-3 py-2"
235237
/>
236238
{/* Honeypot — hidden from humans, bots fill it. */}
237239
<input
@@ -247,7 +249,7 @@ export function CommentSection({
247249
<button
248250
type="submit"
249251
disabled={submitting}
250-
className="bg-gray-900 text-white rounded px-4 py-2 disabled:opacity-50"
252+
className="bg-primary text-primary-foreground rounded-md px-4 py-2 disabled:opacity-50 hover:bg-primary/80 transition-colors"
251253
>
252254
{submitting ? _('Submitting…') : _('Post comment')}
253255
</button>

0 commit comments

Comments
 (0)