Needless UI

ਗਾਈਡਾਂ

ਥੀਮਿੰਗ

ਹਰ ਵਿਜ਼ੂਅਲ ਫ਼ੈਸਲਾ W3C ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ਤੋਂ ਬਣੀ ਇੱਕ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਹੈ। ਕੰਪੋਨੈਂਟ ਸਿਰਫ਼ --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 ਵਿੱਚ ਕੋਈ ਹਿਊ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਜਨਰੇਟ ਕਰੋ: ਸਕ੍ਰਿਪਟ ਹਰ ਰੰਗ ਨੂੰ sRGB ਵਿੱਚ ਢਾਲਦੀ ਹੈ ਅਤੇ ਟੈਕਸਟ ਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੀ ਹਰ ਜੋੜੀ ਦਾ ਕੰਟ੍ਰਾਸਟ ਦੁਬਾਰਾ ਜਾਂਚਦੀ ਹੈ।

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