summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/ProductCard.js6
-rw-r--r--src/pages/shop/product/[slug].js4
-rw-r--r--src/styles/globals.css48
-rw-r--r--tailwind.config.js93
4 files changed, 45 insertions, 106 deletions
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 64624d70..604ee9e0 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -16,7 +16,7 @@ export default function ProductCard({ data }) {
<div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
) : ''}
</Link>
- <div className="product-card__description">
+ <div className="product-card__content">
<div>
{typeof product.manufacture.name !== "undefined" ? (
<Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
@@ -30,12 +30,12 @@ export default function ProductCard({ data }) {
<div className="mt-2">
{product.lowest_price.discount_percentage > 0 ? (
<div className="flex gap-x-1 items-center mb-1">
+ <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
<span className="badge-red">{product.lowest_price.discount_percentage}%</span>
- <p className="text-xs text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
</div>
) : ''}
{product.lowest_price.price_discount > 0 ? (
- <p className="text-caption text-gray_r-12 font-bold">
+ <p className="text-caption-1 text-gray_r-12 font-bold">
{currencyFormat(product.lowest_price.price_discount)}
</p>
) : (
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index c0119c8f..8402036c 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -90,13 +90,13 @@ export default function ProductDetail({ product }) {
<h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
{product.variant_total > 1 && !selectedVariant ? (
- <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
+ <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p>
) : ''}
{product.lowest_price.discount_percentage > 0 ? (
<div className="flex gap-x-1 items-center mb-1">
+ <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
<span className="badge-red">{activeVariant.price.discount_percentage}%</span>
- <p className="text-xs text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
</div>
) : ''}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c512dd9c..95a7a898 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,7 +7,7 @@
html, body {
@apply
w-screen
- text-body
+ text-body-1
text-gray_r-12
bg-gray_r-1
;
@@ -16,15 +16,16 @@ html, body {
@layer base {
h1, .h1 {
@apply
- text-h6
+ text-h-lg
font-semibold
;
}
h2, .h2 {
@apply
- text-body
+ text-h-md
font-semibold
+ leading-6
;
}
@@ -42,7 +43,7 @@ html, body {
.badge-yellow,
.badge-green {
@apply
- text-xs
+ text-caption-2
leading-none
font-medium
px-1
@@ -75,8 +76,8 @@ html, body {
.badge-green {
@apply
- bg-green-100
- text-green-800
+ bg-green_r-6
+ text-green_r-11
;
}
@@ -92,7 +93,7 @@ html, body {
p-3
rounded
border
- text-gray_r-11
+ text-gray_r-12
border-gray_r-7
bg-transparent
w-full
@@ -126,11 +127,10 @@ html, body {
block
w-fit
p-3
- bg-gray-100
- border-gray-300
+ bg-gray_r-3
+ border-gray_r-6
rounded
border
- text-gray-900
text-center
;
}
@@ -156,11 +156,11 @@ html, body {
object-contain
object-center
border-b
- border-gray-300
+ border-gray_r-6
;
}
- .product-card__description {
+ .product-card__content {
@apply
p-2
pb-3
@@ -171,15 +171,17 @@ html, body {
.product-card__title {
@apply
- text-caption-p
+ text-caption-1
text-gray_r-12
+ leading-5
;
}
.product-card__brand {
@apply
- text-caption-p
+ text-caption-1
mb-1
+ block
;
}
}
@@ -323,19 +325,17 @@ html, body {
ease-linear
duration-150
border
- border-gray-300
- bg-gray-100
- hover:bg-gray-300
- text-gray-800
+ border-gray_r-6
+ bg-gray_r-3
+ hover:bg-gray_r-5
+ text-gray_r-12
;
}
.pagination-item--active {
@apply
- border-yellow-900
- bg-yellow-900
- hover:bg-yellow-900
- text-gray-900
+ border-yellow_r-9
+ bg-yellow_r-9
;
}
@@ -348,8 +348,8 @@ html, body {
w-10
rounded
ease-linear
- bg-gray-100
- text-caption
+ bg-gray_r-3
+ text-caption-2
;
}
diff --git a/tailwind.config.js b/tailwind.config.js
index e6c399d0..96fd7a44 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,52 +10,24 @@ module.exports = {
'sans': ['Inter', 'sans-serif']
},
fontSize: {
- 'h1': ['60px', '120%'],
- 'h2': ['48px', '120%'],
- 'h3': ['34px', '120%'],
- 'h4': ['24px', '120%'],
- 'h5': ['20px', '120%'],
- 'h6': ['18px', '120%'],
- 'body-lg': ['16px', '120%'],
- 'body': ['14px', '120%'],
- 'caption': ['12px', '120%'],
- 'caption-p': ['12px', '150%']
+ 'display-lg': ['56px', '100%'],
+ 'display-md': ['48px', '100%'],
+ 'display-sm': ['36px', '100%'],
+ 'title-lg': ['28px', '121%'],
+ 'title-md': ['24px', '121%'],
+ 'title-sm': ['20px', '121%'],
+ 'h-lg': ['18px', '121%'],
+ 'h-md': ['17px', '121%'],
+ 'h-sm': ['16px', '121%'],
+ 'body-1': ['15px', '121%'],
+ 'body-2': ['14px', '121%'],
+ 'paragraph-1': ['15px', '140%'],
+ 'paragraph-2': ['14px', '140%'],
+ 'caption-1': ['13px', '121%'],
+ 'caption-2': ['12px', '121%'],
},
colors: {
- gray: {
- 900: '#2B2B2B',
- 800: '#595959',
- 700: '#767676',
- 600: '#888888',
- 500: '#ABABAB',
- 400: '#CCCCCC',
- 300: '#E4E4E4',
- 200: '#F0F0F0',
- 100: '#F6F6F6',
- },
- red: {
- 900: '#CE1D34',
- 800: '#D94F61',
- 700: '#DF6D7C',
- 600: '#E3808D',
- 500: '#ECA6AF',
- 400: '#F3C9CE',
- 300: '#F9E3E6',
- 200: '#FBEFF0',
- 100: '#FDF6F7',
- },
- yellow: {
- 900: '#F8C20A',
- 800: '#FACF40',
- 700: '#FBD761',
- 600: '#FBDC75',
- 500: '#FCE79E',
- 400: '#FDF0C2',
- 300: '#FEF7E0',
- 200: '#FFFBED',
- 100: '#FFFCF5',
- },
- 'r-green': {
+ 'green_r': {
1: '#fbfefc',
2: '#f2fcf5',
3: '#e9f9ee',
@@ -125,39 +97,6 @@ module.exports = {
11: '#706f6c',
12: '#1b1b18',
}
- // yellow500: {
- // 900: '#F8C20A',
- // 800: '#FACF40',
- // 700: '#FBD761',
- // 600: '#FBDC75',
- // 500: '#FCE79E',
- // 400: '#FDF0C2',
- // 300: '#FEF7E0',
- // 200: '#FFFBED',
- // 100: '#FFFCF5',
- // }
- // yellow600: {
- // 900: '#D7A30A',
- // 800: '#DFB740',
- // 700: '#E5C361',
- // 600: '#E8CB75',
- // 500: '#EFDB9E',
- // 400: '#F5E8C2',
- // 300: '#FAF3E0',
- // 200: '#FCF8ED',
- // 100: '#FDFBF5',
- // }
- // yellow700: {
- // 900: '#B5860A',
- // 800: '#C5A040',
- // 700: '#CFB161',
- // 600: '#D5BB75',
- // 500: '#E2CF9E',
- // 400: '#EDE1C2',
- // 300: '#F6F0E0',
- // 200: '#FAF6ED',
- // 100: '#FCFAF5',
- // }
}
},
},
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 18:55:29 +0000