hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add global spacing tokens

Browse Source
This commit is contained in:
Ermin Zoronjic 2026-05-07 03:06:40 +02:00
parent 7a92dcbe8e
commit 5ed18bda75
5 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
parfum-shop/src/components/ProductDetailPage.css
View File

@ -166,7 +166,7 @@
.character-facts > div, .character-facts > div,
.meta-card, .meta-card,
.delivery-grid div { .delivery-grid div {
padding-top: 1rem; padding-top: var(--gap-sm);
border-top: 1px solid var(--theme-border); border-top: 1px solid var(--theme-border);
} }
@ -177,7 +177,7 @@
.comment-card span, .comment-card span,
.review-detail-row span { .review-detail-row span {
display: block; display: block;
margin-bottom: 0.55rem; margin-bottom: var(--gap-2xs);
color: var(--theme-text-muted); color: var(--theme-text-muted);
font-size: var(--text-xs); font-size: var(--text-xs);
letter-spacing: 0.2em; letter-spacing: 0.2em;
@ -206,7 +206,7 @@
overflow: visible; overflow: visible;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: clamp(1rem, 1.8vw, 1.45rem); gap: var(--gap-sm);
padding: 0; padding: 0;
border: 0; border: 0;
background: transparent; background: transparent;
@ -344,7 +344,7 @@
.purchase-discovery-note strong { .purchase-discovery-note strong {
display: block; display: block;
margin-bottom: 0.25rem; margin-bottom: var(--gap-2xs);
color: var(--theme-text); color: var(--theme-text);
font-weight: 500; font-weight: 500;
} }
@ -358,7 +358,7 @@
} }
.purchase-discovery-note .discount-preview { .purchase-discovery-note .discount-preview {
margin-top: 0.5rem; margin-top: var(--gap-2xs);
color: #fff; color: #fff;
} }
@ -391,7 +391,7 @@
.reviews-heading h2, .reviews-heading h2,
.recommendation-heading h2, .recommendation-heading h2,
.detail-bottom-cta h2 { .detail-bottom-cta h2 {
margin: 0.85rem 0 0; margin: var(--gap-xs) 0 0;
color: var(--theme-text); color: var(--theme-text);
font-size: clamp(2.2rem, 5.6vw, 6rem); font-size: clamp(2.2rem, 5.6vw, 6rem);
font-weight: 300; font-weight: 300;
@ -405,7 +405,7 @@
.reviews-heading p, .reviews-heading p,
.detail-bottom-cta p { .detail-bottom-cta p {
max-width: var(--text-measure); max-width: var(--text-measure);
margin: 1.25rem 0 0; margin: var(--gap-sm) 0 0;
color: var(--theme-text-muted); color: var(--theme-text-muted);
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: 1.62; line-height: 1.62;
@ -553,7 +553,7 @@
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-sm); gap: var(--gap-sm);
margin-top: clamp(1.6rem, 4vw, 4rem); margin-top: var(--gap-lg);
} }
.structure-phase-card, .structure-phase-card,
@ -720,7 +720,7 @@
} }
.comment-spotlight { .comment-spotlight {
margin-top: clamp(1.6rem, 4vw, 4rem); margin-top: var(--gap-lg);
} }
.comment-dots { .comment-dots {
@ -829,7 +829,7 @@
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
gap: var(--gap-lg); gap: var(--gap-lg);
align-items: end; align-items: end;
margin-top: clamp(1rem, 3vw, 2rem); margin-top: var(--gap-lg);
padding: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 4vw, 3.5rem);
overflow: hidden; overflow: hidden;
background: background:
@ -860,7 +860,7 @@
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-sm); gap: var(--gap-sm);
margin-top: clamp(1.6rem, 4vw, 4rem); margin-top: var(--gap-lg);
} }
.recommendation-card { .recommendation-card {
@ -913,7 +913,7 @@
} }
.recommendation-card p { .recommendation-card p {
margin: 0.55rem 0 0; margin: var(--gap-2xs) 0 0;
color: var(--theme-text-muted); color: var(--theme-text-muted);
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: 1.45; line-height: 1.45;
@ -1104,16 +1104,16 @@
} }
.hero-fact-grid { .hero-fact-grid {
gap: 0.45rem; gap: var(--gap-2xs);
} }
.hero-fact-grid div { .hero-fact-grid div {
min-width: 0; min-width: 0;
padding-top: 0.45rem; padding-top: var(--gap-2xs);
} }
.hero-fact-grid span { .hero-fact-grid span {
margin-bottom: 0.25rem; margin-bottom: var(--gap-2xs);
font-size: clamp(0.65rem, 2vw, var(--text-xs)); font-size: clamp(0.65rem, 2vw, var(--text-xs));
letter-spacing: 0.09em; letter-spacing: 0.09em;
} }
@ -1126,7 +1126,7 @@
.product-purchase-panel { .product-purchase-panel {
min-width: 0; min-width: 0;
gap: 0.48rem; gap: var(--gap-2xs);
} }
.purchase-price-row { .purchase-price-row {

4
parfum-shop/src/pages/AboutPage.css
View File

@ -76,7 +76,7 @@
.about-section-head { .about-section-head {
display: grid; display: grid;
gap: var(--gap-2xs); gap: var(--gap-2xs);
margin-bottom: clamp(1.6rem, 4vw, 3rem); margin-bottom: var(--gap-lg);
} }
.about-section-head h2 { .about-section-head h2 {
@ -107,7 +107,7 @@
flex-direction: column; flex-direction: column;
gap: var(--gap-xs); gap: var(--gap-xs);
min-height: 14rem; min-height: 14rem;
padding: clamp(1.1rem, 2.4vw, 1.8rem); padding: clamp(1.1rem, 2.4vw, 1.6rem);
border: 1px solid var(--theme-border); border: 1px solid var(--theme-border);
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),

40
parfum-shop/src/pages/DiscoverySetPage.css
View File

@ -100,7 +100,7 @@
.discovery-panel-facts div, .discovery-panel-facts div,
.discovery-benefit { .discovery-benefit {
padding-top: 1rem; padding-top: var(--gap-sm);
border-top: 1px solid var(--theme-border); border-top: 1px solid var(--theme-border);
} }
@ -121,7 +121,7 @@
align-self: center; align-self: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: clamp(1rem, 1.8vw, 1.45rem); gap: var(--gap-sm);
width: min(100%, 390px); width: min(100%, 390px);
min-width: 0; min-width: 0;
padding: 0; padding: 0;
@ -150,7 +150,7 @@
} }
.discovery-panel-facts span { .discovery-panel-facts span {
margin-bottom: 0.55rem; margin-bottom: var(--gap-2xs);
} }
.discovery-product-tags span { .discovery-product-tags span {
@ -235,7 +235,7 @@
.discovery-section-heading h2, .discovery-section-heading h2,
.discovery-section-intro h2, .discovery-section-intro h2,
.discovery-final-cta h2 { .discovery-final-cta h2 {
margin: 0.85rem 0 0; margin: var(--gap-xs) 0 0;
color: var(--theme-text); color: var(--theme-text);
font-size: clamp(2.2rem, 5.6vw, 6rem); font-size: clamp(2.2rem, 5.6vw, 6rem);
font-weight: 300; font-weight: 300;
@ -249,7 +249,7 @@
.discovery-section-heading p, .discovery-section-heading p,
.discovery-final-cta p { .discovery-final-cta p {
max-width: var(--text-measure); max-width: var(--text-measure);
margin: 1.25rem 0 0; margin: var(--gap-sm) 0 0;
color: var(--theme-text-muted); color: var(--theme-text-muted);
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: 1.62; line-height: 1.62;
@ -259,7 +259,7 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-content: end; align-content: end;
gap: clamp(0.9rem, 1.8vw, 1.25rem); gap: var(--gap-sm);
min-height: clamp(360px, 42vw, 620px); min-height: clamp(360px, 42vw, 620px);
padding: clamp(1.2rem, 3vw, 2.4rem); padding: clamp(1.2rem, 3vw, 2.4rem);
border: 1px solid var(--theme-border); border: 1px solid var(--theme-border);
@ -273,7 +273,7 @@
justify-content: space-between; justify-content: space-between;
align-items: end; align-items: end;
gap: var(--gap-sm); gap: var(--gap-sm);
padding-bottom: clamp(1rem, 2vw, 1.35rem); padding-bottom: var(--gap-sm);
border-bottom: 1px solid var(--theme-border); border-bottom: 1px solid var(--theme-border);
} }
@ -298,12 +298,12 @@
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: var(--gap-sm); gap: var(--gap-sm);
align-items: start; align-items: start;
padding-top: 1rem; padding-top: var(--gap-sm);
} }
.discovery-benefit strong { .discovery-benefit strong {
display: block; display: block;
margin-bottom: 0.35rem; margin-bottom: var(--gap-2xs);
color: var(--theme-text); color: var(--theme-text);
font-size: var(--text-base); font-size: var(--text-base);
font-weight: 400; font-weight: 400;
@ -324,7 +324,7 @@
.discovery-section-heading { .discovery-section-heading {
display: block; display: block;
margin-bottom: clamp(1.8rem, 4vw, 3.8rem); margin-bottom: var(--gap-lg);
} }
.discovery-section-heading h2 { .discovery-section-heading h2 {
@ -341,7 +341,7 @@
/* Layout columns are provided by the global Grid12 system (see Grid.jsx). */ /* Layout columns are provided by the global Grid12 system (see Grid.jsx). */
.discovery-steps-grid { .discovery-steps-grid {
margin-top: clamp(1.6rem, 4vw, 4rem); margin-top: var(--gap-lg);
} }
.discovery-step-card { .discovery-step-card {
@ -569,7 +569,7 @@
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
gap: var(--gap-lg); gap: var(--gap-lg);
align-items: end; align-items: end;
margin-top: clamp(1rem, 3vw, 2rem); margin-top: var(--gap-lg);
padding: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 4vw, 3.5rem);
overflow: hidden; overflow: hidden;
background: background:
@ -763,7 +763,7 @@
} }
.discovery-included .discovery-section-heading { .discovery-included .discovery-section-heading {
margin-bottom: clamp(1.6rem, 8vw, 2.6rem); margin-bottom: var(--gap-lg);
} }
.discovery-section-heading h2.discovery-included-title { .discovery-section-heading h2.discovery-included-title {
@ -801,7 +801,7 @@
} }
.discovery-scroll-item .discovery-product-index { .discovery-scroll-item .discovery-product-index {
margin-bottom: 0.1rem; margin-bottom: 0;
} }
.discovery-scroll-copy h3 { .discovery-scroll-copy h3 {
@ -816,9 +816,9 @@
.discovery-scroll-mobile-detail { .discovery-scroll-mobile-detail {
display: grid; display: grid;
gap: 0.45rem; gap: var(--gap-2xs);
max-width: var(--text-measure); max-width: var(--text-measure);
margin-top: 0.15rem; margin-top: var(--gap-2xs);
} }
.discovery-scroll-mobile-detail p { .discovery-scroll-mobile-detail p {
@ -829,7 +829,7 @@
.discovery-scroll-mobile-tags { .discovery-scroll-mobile-tags {
display: flex; display: flex;
gap: var(--gap-2xs); gap: var(--gap-2xs);
margin-top: 0.45rem; margin-top: var(--gap-2xs);
} }
.discovery-story-visual-panel { .discovery-story-visual-panel {
@ -871,11 +871,7 @@
.discovery-price-row { .discovery-price-row {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: var(--gap-2xs);
}
.discovery-included .discovery-section-heading {
margin-bottom: clamp(1.4rem, 7vw, 2rem);
} }
.discovery-section-heading h2.discovery-included-title { .discovery-section-heading h2.discovery-included-title {

2
parfum-shop/src/pages/LandingPage.css
View File

@ -230,7 +230,7 @@ body.theme-light .hero-wordmark__image {
grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--gap-md); gap: var(--gap-md);
align-items: end; align-items: end;
margin-bottom: clamp(1.6rem, 4vw, 4.8rem); margin-bottom: var(--gap-lg);
} }
.section-heading::after { .section-heading::after {

2
parfum-shop/src/pages/SupportPage.css
View File

@ -156,7 +156,7 @@
.support-section-head { .support-section-head {
display: grid; display: grid;
gap: var(--gap-2xs); gap: var(--gap-2xs);
margin-bottom: clamp(1.6rem, 4vw, 3rem); margin-bottom: var(--gap-lg);
} }
.support-section-head h2 { .support-section-head h2 {