Needless UI

گائیڈز

تھیمنگ

ہر بصری فیصلہ ایک CSS کسٹم پراپرٹی ہے جو W3C ڈیزائن ٹوکنز سے بنتی ہے۔ کمپوننٹس صرف --nui-color-accent-solid جیسے سیمینٹک ٹوکنز استعمال کرتے ہیں، اس لیے ایک ٹوکن بدلنے سے اسے استعمال کرنے والا ہر کمپوننٹ نئے انداز میں ڈھل جاتا ہے۔

لائٹ اور ڈارک

ڈیفالٹ طور پر موڈ آپریٹنگ سسٹم کی ترجیح سے طے ہوتا ہے۔ data-nui-theme کے ذریعے کسی بھی ایلیمنٹ پر موڈ مقرر کریں، اور انہیں آزادی سے ایک دوسرے کے اندر رکھیں۔

theme-attribute.html
<html data-nui-theme="dark">
  <!-- Everything here is dark… -->
  <aside data-nui-theme="light">…except this panel.</aside>
</html>
data-nui-theme="light"
data-nui-theme="dark"

ٹوکنز اوور رائیڈ کریں

ٹوکنز @layer nui میں رہتے ہیں، اس لیے آپ کی ایپ کا سادہ CSS انہیں اوور رائیڈ کر دیتا ہے۔ پوری ایپ کے لیے انہیں :root پر سیٹ کریں، یا اس کے کسی ایک حصے کے لیے کسی بھی ایلیمنٹ پر۔

override.css
/* The whole app */
:root {
  --nui-color-accent-solid: oklch(0.52 0.16 150);
  --nui-radius-md: 0.75rem;
}

/* One part of it */
.checkout {
  --nui-color-accent-solid: var(--nui-color-success-solid);
}

برانڈ پیلیٹ

رنگوں کے اسکیلز جنریٹ کیے جاتے ہیں۔ packages/tokens/scripts/palette.ts میں کسی رنگ کا hue بدلیں اور دوبارہ جنریٹ کریں: اسکرپٹ ہر رنگ کو sRGB میں دوبارہ فٹ کرتی ہے اور متن اور بیک گراؤنڈ کے ہر جوڑے کا کنٹراسٹ دوبارہ چیک کرتی ہے۔

palette.sh
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens