Variables

CSS Variables (Custom Properties) က value တွေကို reuse လုပ်နိုင်တဲ့စနစ်ပါ။ Brand color, spacing, radius, shadow, font size တွေကို variable ထဲသိမ်းထားရင် design system တစ်ခုလိုသုံးနိုင်ပါတယ်။ Website တစ်ခုလုံးမှာ primary color ပြောင်းချင်ရင် file တစ်ခုလုံးလိုက်ရှာစရာမလိုတော့ပါဘူး။ Variable တစ်ခုကိုပြင်လိုက်တာနဲ့ အကုန်လိုက်ပြောင်းသွားပါတယ်။

:root {
  --primary-color: #77f5ff;
  --text-color: #eaf2ff;
  --card-radius: 16px;
}

.button {
  background: var(--primary-color);
  color: #041013;
  border-radius: var(--card-radius);
}

.card {
  color: var(--text-color);
  border-radius: var(--card-radius);
}

Button နဲ့ card တွေမှာ တူညီတဲ့ design token တွေကိုပြန်သုံးနိုင်ပါမယ်။ Theme ပြောင်းတဲ့အခါ maintenance အများကြီးလျော့သွားပါတယ်။