MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dimentorin): audit FE samakan dgn Figma design system

Browse Source 
- FIX KRITIS: apps/dimentorin/src/index.css @theme nyimpang dari Figma (67 token beda: primary-500 #1a8ce6 vs #23a1eb, semua warna success/info/warning/danger + skala typography). Disamakan dgn libs/ui (source of truth Figma).
- Hapus hardcoded warna non-token di apps: blue-400, gray-5/6/700, amber/emerald/red-100, green-200/500 -> token primary/neutral/warning/success/danger
- libs/ui: gray-* -> neutral-*, blue-* -> primary-*, #1a8ce6 -> #23a1eb, bg-[#F0F8FF] -> primary-50, SVG fill hex -> fill-* token classes
- Typography: text-[27/26/22/11px] menyimpang dari skala Figma -> text-[29/23/19/12px]
- Radius: rounded-4xl (32px, tidak ada di Figma) -> rounded-3xl (24px)
This commit is contained in:
asepharyana
2026-08-05 19:28:02 +07:00
parent 94f80e4eda
commit 5b50680f14
33 changed files with 149 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
+2 -2
View File
@@ -72,8 +72,8 @@ export const WhatWeOfferSection: FC = () => {
<div
className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
>
<p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
<p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
<p className="font-semibold lg:text-[23px] lg:font-bold">{offer.title}</p>
<p className="text-xs lg:text-[19px] lg:font-medium">{offer.description}</p>
</div>
</motion.div>
)}
apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export default function DetailArticle() {
{date}
</p>
<div
className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-4xl w-max mx-auto md:text-xs xl:text-[15px]"
className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-3xl w-max mx-auto md:text-xs xl:text-[15px]"
>
{article?.category}
</div>
apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
</div>
<div className={cn("leading-tight", variant === "recent" && "xl:flex-1")}>
<div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-4xl mb-4 xl:mb-[15px]">
<div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-3xl mb-4 xl:mb-[15px]">
{article?.category ?? "Artikel"}
</div>
<Link
@@ -51,7 +51,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
className={cn(
"text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
variant === "featured" && "text-[19px] md:text-[23px]",
variant === "recent" && "mb-7 xl:text-[27px]"
variant === "recent" && "mb-7 xl:text-[29px]"
)}
>
{title}
apps/dimentorin/src/app/(public)/articles/page.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ export default function Components(): ReactElement {
variant="text"
onClick={() => setActiveTab(category)}
className={cn(
"relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
"relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-3xl md:text-xs md:font-semibold xl:text-[15px]",
"before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
activeTab === category && "text-primary-500 before:w-full"
)}
apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
+2 -2
View File
@@ -16,11 +16,11 @@ export const SuccessStep = () => {
<div
className={cn(
"mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-200 rounded-full",
"mb-3 flex justify-center items-center mx-auto size-[60px] bg-success-200 rounded-full",
"md:size-[100px] md:mb-7 xl:size-[120px] xl:mb-8"
)}
>
<div className="bg-green-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
<div className="bg-success-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
<CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
</div>
</div>
apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const SenpaiScheduleSection: FC<Props> = ({ onBook, mentorId }) => {
<div key={date}>
<div className="flex justify-between items-center mb-4">
<p className="text-[15px] font-medium">{formatDate(date)}</p>
<p className="rounded-4xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
<p className="rounded-3xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
{daySlots.length} slot tersisa
</p>
</div>
apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export const Components: FC = (): ReactElement => {
key={i}
className="flex items-center justify-between gap-2 mb-1"
>
<span className="text-[11px] text-neutral-600 truncate">
<span className="text-[12px] text-neutral-600 truncate">
📄 {s.title}
</span>
<span className="text-[10px] text-neutral-400 shrink-0">
apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const Components: FC = (): ReactElement => {
<div className="animate-pulse bg-neutral-100 h-72 rounded-2xl" />
) : (
<article className="max-w-3xl">
<span className="inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 bg-neutral-100 text-neutral-600">
<span className="inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 bg-neutral-100 text-neutral-600">
{material.category}
</span>
<h1 className="text-3xl font-semibold text-neutral-800 mb-3">
apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export const Components: FC = (): ReactElement => {
className="group bg-white rounded-2xl border border-neutral-100 p-6 shadow-sm hover:shadow-md transition-shadow"
>
<span
className={`inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 ${color}`}
className={`inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 ${color}`}
>
{m.category}
</span>
apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx
+6 -6
View File
@@ -13,15 +13,15 @@ import { ReloadOutlined, CheckOutlined } from '@ant-design/icons';
import { toast } from 'sonner';
const STATUS_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
confirmed: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
confirmed: 'bg-success-100 text-success-700',
completed: 'bg-primary-100 text-primary-700',
cancelled: 'bg-red-100 text-red-600',
cancelled: 'bg-danger-100 text-danger-600',
};
const PAYMENT_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
paid: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
paid: 'bg-success-100 text-success-700',
expired: 'bg-neutral-200 text-neutral-600',
};
@@ -154,7 +154,7 @@ export const Components: FC = (): ReactElement => {
</h3>
<span
className={cn(
'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
)}
>
apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx
+6 -6
View File
@@ -11,15 +11,15 @@ import { ReloadOutlined } from '@ant-design/icons';
import { toast } from 'sonner';
const STATUS_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
confirmed: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
confirmed: 'bg-success-100 text-success-700',
completed: 'bg-primary-100 text-primary-700',
cancelled: 'bg-red-100 text-red-600',
cancelled: 'bg-danger-100 text-danger-600',
};
const PAYMENT_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
paid: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
paid: 'bg-success-100 text-success-700',
expired: 'bg-neutral-200 text-neutral-600',
};
@@ -112,7 +112,7 @@ export const Components: FC = (): ReactElement => {
</h3>
<span
className={cn(
'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
)}
>
apps/dimentorin/src/app/(public)/mentoring/page.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export const Components: FC = (): ReactElement => {
<section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
<motion.div
className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-4xl"
className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-3xl"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4 }}
apps/dimentorin/src/app/auth/forgot/page.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const Components: FC = (): ReactElement => {
<ForgotStep step={1} />
<h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
<h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
<h6 className='text-gray-600 mt-8'>Email</h6>
<h6 className='text-neutral-600 mt-8'>Email</h6>
<Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
<Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
</div>
apps/dimentorin/src/app/auth/forgot/summon/page.tsx
+3 -3
View File
@@ -13,12 +13,12 @@ export const Components: FC = (): ReactElement => {
<h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
<h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
<div className='my-4'>
<h6 className='text-gray-700'>Password Baru</h6>
<h6 className='text-neutral-700'>Password Baru</h6>
<Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
<h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
<h6 className='text-neutral-700 mt-5'>Ulang Password Baru</h6>
<Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
</div>
<div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
<div className='mb-4 text-neutral-700 flex flex-col gap-3 text-sm'>
<h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
<h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>
<h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>
apps/dimentorin/src/app/auth/login/page.tsx
+4 -4
View File
@@ -57,12 +57,12 @@ export const Components: FC = (): ReactElement => {
</a>
</div>
<div className="flex items-center w-full">
<div className="flex-grow border-t border-blue-400 opacity-50"></div>
<span className="px-3 text-blue-400">Or</span>
<div className="flex-grow border-t border-blue-400 opacity-50"></div>
<div className="flex-grow border-t border-primary-400 opacity-50"></div>
<span className="px-3 text-primary-400">Or</span>
<div className="flex-grow border-t border-primary-400 opacity-50"></div>
</div>
<Button
className="w-full my-3 text-gray-500 gap-2"
className="w-full my-3 text-neutral-500 gap-2"
variant="secondary"
>
<p>Log In With Google</p>
apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
+3 -3
View File
@@ -17,10 +17,10 @@ export const Components: FC = (): ReactElement => {
Data kamu telah kami terima dan sedang dalam proses verifikasi.
</h4>
<svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
<rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
<circle cx="74" cy="74" r="73.6348" className="fill-info-400"/>
<rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" className="fill-info-600"/>
<circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
<path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
<path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" className="fill-primary-50"/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
Mohon tunggu maksimal 2 hari kerja untuk proses aktivasi akun. Kami akan menghubungi kamu jika proses telah selesai.
apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
+3 -3
View File
@@ -24,18 +24,18 @@ export const Components: FC = (): ReactElement => {
xmlns="http://www.w3.org/2000/svg"
className="mt-10"
>
<circle cx="99" cy="99" r="99" fill="#BCF8B0" />
<circle cx="99" cy="99" r="99" className="fill-success-200" />
<rect
x="31.1152"
y="32.9141"
width="133.971"
height="133.971"
rx="66.9857"
fill="#35BA43"
className="fill-success-500"
/>
<path
d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
fill="#E0FBD8"
className="fill-success-100"
/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
apps/dimentorin/src/app/auth/register/page.tsx
+5 -5
View File
@@ -65,27 +65,27 @@ export const Components: FC = (): ReactElement => {
control={form.control}
name={'password'}
/>
<h6 className="text-sm text-gray-500 mt-1">
<h6 className="text-sm text-neutral-500 mt-1">
"Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
</h6>
<h6 className="text-sm text-gray-500 mt-2">
<h6 className="text-sm text-neutral-500 mt-2">
Tips membuat password yang OP:
</h6>
<h6 className="text-sm text-gray-500">
<h6 className="text-sm text-neutral-500">
- Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
<span role="img" aria-label="emoji">
⚡
</span>
)
</h6>
<h6 className="text-sm text-gray-500">
<h6 className="text-sm text-neutral-500">
- Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
ultimate!
<span role="img" aria-label="emoji">
🔥
</span>
</h6>
<h6 className="text-sm text-gray-500 mb-2">
<h6 className="text-sm text-neutral-500 mb-2">
- Jangan pakai password yang gampang ditebak, nanti ketahuan
musuh!
<span role="img" aria-label="emoji">
apps/dimentorin/src/app/auth/register/success/page.tsx
+3 -3
View File
@@ -30,18 +30,18 @@ export const Components: FC = (): ReactElement => {
xmlns="http://www.w3.org/2000/svg"
className="mt-10"
>
<circle cx="99" cy="99" r="99" fill="#BCF8B0" />
<circle cx="99" cy="99" r="99" className="fill-success-200" />
<rect
x="31.1152"
y="32.9141"
width="133.971"
height="133.971"
rx="66.9857"
fill="#35BA43"
className="fill-success-500"
/>
<path
d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
fill="#E0FBD8"
className="fill-success-100"
/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl">
apps/dimentorin/src/index.css
+64 -64
View File
@@ -5,69 +5,67 @@
@theme {
--color-primary-50: #f0f8ff;
--color-primary-100: #e1f0fd;
--color-primary-200: #b8e1f8;
--color-primary-300: #a1d4f0;
--color-primary-400: #4aa4da;
--color-primary-500: #1a8ce6;
--color-primary-600: #1673c7;
--color-primary-700: #0f5ca5;
--color-primary-800: #0a4780;
--color-primary-900: #04305d;
--color-primary-200: #bce1fb;
--color-primary-300: #81cbf8;
--color-primary-400: #3eb0f2;
--color-primary-500: #23a1eb;
--color-primary-600: #0877c1;
--color-primary-700: #085f9c;
--color-primary-800: #0b5181;
--color-primary-900: #0f446b;
--color-primary-950: #0a2b47;
--color-neutral-50: #f7f7f7;
--color-neutral-50: #f6f6f6;
--color-neutral-100: #e7e7e7;
--color-neutral-200: #d0d0d0;
--color-neutral-300: #b7b7b7;
--color-neutral-400: #9f9f9f;
--color-neutral-500: #7e7e7e;
--color-neutral-200: #d1d1d1;
--color-neutral-300: #b0b0b0;
--color-neutral-400: #888888;
--color-neutral-500: #6d6d6d;
--color-neutral-600: #5d5d5d;
--color-neutral-700: #4a4a4a;
--color-neutral-800: #3a3a3a;
--color-neutral-900: #2f2f2f;
--color-neutral-700: #4f4f4f;
--color-neutral-800: #454545;
--color-neutral-900: #3d3d3d;
--color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee;
--color-success-100: #cde6dd;
--color-success-200: #9bccbc;
--color-success-300: #78bdab;
--color-success-400: #4ca88f;
--color-success-500: #349078;
--color-success-600: #2f7c66;
--color-success-700: #26624f;
--color-success-800: #1e4a3b;
--color-success-900: #1b513b;
--color-success-100: #e0fbd8;
--color-success-200: #bcf8b0;
--color-success-300: #8eea85;
--color-success-400: #63d564;
--color-success-500: #35ba43;
--color-success-600: #269f3e;
--color-success-700: #1a8439;
--color-success-800: #106b32;
--color-success-900: #0b592f;
--color-info-50: #e7f4f5;
--color-info-100: #cce9ea;
--color-info-200: #99d3d5;
--color-info-300: #78c4c7;
--color-info-400: #3aa9ad;
--color-info-500: #279599;
--color-info-600: #207d82;
--color-info-700: #1a666b;
--color-info-800: #124c52;
--color-info-900: #093d43;
--color-info-100: #ccfcfe;
--color-info-200: #9bf3fd;
--color-info-300: #67e3fb;
--color-info-400: #42cdf8;
--color-info-500: #04acf3;
--color-info-600: #0185d0;
--color-info-700: #0264af;
--color-info-800: #01478d;
--color-info-900: #003375;
--color-warning-50: #fffce6;
--color-warning-100: #fff8cc;
--color-warning-200: #fef39b;
--color-warning-300: #fde967;
--color-warning-400: #fbd93d;
--color-warning-500: #f3c215;
--color-warning-600: #d7a20f;
--color-warning-700: #aa7e0c;
--color-warning-800: #805c07;
--color-warning-900: #665c00;
--color-warning-100: #fffcd3;
--color-warning-200: #fffaa9;
--color-warning-300: #fff67d;
--color-warning-400: #fff25d;
--color-warning-500: #ffed27;
--color-warning-600: #dbc91d;
--color-warning-700: #b7a714;
--color-warning-800: #93850b;
--color-warning-900: #7a6d07;
--color-danger-50: #ffe7e7;
--color-danger-100: #ffcece;
--color-danger-200: #ff9f9f;
--color-danger-300: #ff6e6e;
--color-danger-400: #fa4646;
--color-danger-500: #ef1f1f;
--color-danger-600: #d11515;
--color-danger-700: #a51111;
--color-danger-800: #7f0c0c;
--color-danger-900: #5d2d2d;
--color-danger-100: #ffe8da;
--color-danger-200: #ffcbb3;
--color-danger-300: #ffaa8d;
--color-danger-400: #ff8870;
--color-danger-500: #ff5242;
--color-danger-600: #da3030;
--color-danger-700: #b7212d;
--color-danger-800: #93152a;
--color-danger-900: #7a0c27;
--radius-none: 0px;
--radius-sm: 2px;
@@ -80,13 +78,15 @@
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
--text-h1: 3rem; /* ~48px */
--text-h2: 2.4rem; /* ~38.4px */
--text-h3: 1.92rem; /* ~30.72px */
--text-p1: 1.54rem; /* ~24.58px */
--text-p2: 1.23rem; /* ~19.68px */
--text-label1: 0.98rem; /* ~15.74px */
--text-label2: 0.78rem; /* ~12.59px */
--text-h1: 3.833rem; /* ~46px */
--text-h2: 3.083rem; /* ~37px */
--text-h3: 2.417rem; /* ~29px */
--text-p1: 1.917rem; /* ~23px */
--text-p2: 1.583rem; /* ~19px */
--text-p3: 1.25rem; /* 15px */
--text-label1: 1rem; /* 12px */
--text-label2: 0.833rem; /* ~10px */
--text-label3: 0.677rem; /* ~8px */
}
@layer base {
@@ -124,4 +124,4 @@
.scrollbar-hide::-webkit-scrollbar {
@apply hidden;
}
}
}