തീമിംഗ്

ഒരു പാലറ്റ്, എല്ലാ കമ്പോണന്റും

ഓരോ കമ്പോണന്റും ഒരു ഡിഫോൾട്ട് രൂപത്തോടെയാണ് വരുന്നത്, കോൺഫിഗറേഷൻ ഒന്നും ആവശ്യമില്ല. നിങ്ങളുടെ സ്വന്തം പാലറ്റ് വേണമെങ്കിൽ, --gbs-* വേരിയബിളുകൾ :root-ൽ ഒരു തവണ സെറ്റ് ചെയ്യുക, അപ്പോൾ ഇൻസ്റ്റോൾ ചെയ്ത എല്ലാ കമ്പോണന്റുകളും അത് പിന്തുടരും — DataGrid ഉൾപ്പെടെ.

:root {
  --gbs-accent: #7c3aed;
  --gbs-accent-soft: #f3e8ff;
  --gbs-radius: 10px;
  --gbs-font-size: 14px;
}

ലൈബ്രറി തീം ചെയ്യാനുള്ള മുഴുവൻ API അതാണ്. ഒരു പാലറ്റ് മതിയാകാത്ത സന്ദർഭങ്ങൾക്കുള്ളതാണ് താഴെയുള്ളതെല്ലാം.

ഒരു മൂല്യം എങ്ങനെ പരിഹരിക്കപ്പെടുന്നു

ഓരോ കമ്പോണന്റ് വേരിയബിളും ഒരേ ചെയിനിലൂടെ കടന്നുപോകുന്നു, സെറ്റ് ചെയ്ത ആദ്യത്തേതിൽ നിർത്തുന്നു:

1. കമ്പോണന്റിന്റെ സ്വന്തം വേരിയബിൾ — --in-accent, --dg-accent, --ck-border എന്നിങ്ങനെ. ഒരു കമ്പോണന്റ്, അല്ലെങ്കിൽ അതിന്റെ ഒരു ഇൻസ്റ്റൻസ് മാത്രം മാറ്റാൻ ഇത് സെറ്റ് ചെയ്യുക.
2. ഷെയേർഡ് വേരിയബിൾ — --gbs-accent. നിങ്ങൾ സാധാരണയായി സെറ്റ് ചെയ്യുന്നത് ഇതാണ്.
3. DataGrid-ന്റെ വേരിയബിൾ — --dg-accent, ഗ്രിഡിന്റെ സ്റ്റൈൽഷീറ്റ് ലോഡ് ചെയ്തിട്ടുണ്ടെങ്കിൽ. ഈ ഷെയേർഡ് വേരിയബിളുകൾ ഉണ്ടാകുന്നതിനു മുമ്പ് ഗ്രിഡ് തീം ചെയ്ത പ്രോജക്ടുകൾ ഇപ്പോഴും പ്രവർത്തിക്കാൻ ഇത് നിലനിർത്തിയിരിക്കുന്നു.
4. ബിൽറ്റ്-ഇൻ ഡിഫോൾട്ട് — ഒരു light-dark() ജോടി, അതിനാൽ ഇത് പേജിന്റെ കളർ സ്കീം പിന്തുടരുന്നു.

CSS-ൽ ആ ചെയിൻ ഇങ്ങനെ കാണപ്പെടുന്നു, ഏതെങ്കിലും styles.css തുറന്നാൽ നിങ്ങൾ ഇത് കാണും:

.in-root {
  --in-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
}

ഷെയേർഡ് വേരിയബിളുകൾ

ഡിഫോൾട്ടുകൾ ലൈറ്റ് / ഡാർക്ക് ക്രമത്തിൽ എഴുതിയിരിക്കുന്നു.

സർഫേസുകളും ടെക്സ്റ്റും

ബോർഡറുകളും ആകൃതിയും

ആക്സന്റും സ്റ്റാറ്റസും

ഗ്രിഡ് റോകൾ

DataGrid മാത്രമാണ് ഇവ ഉപയോഗിക്കുന്നത്.

ഡാർക്ക് മോഡ്

ഡിഫോൾട്ടുകൾ light-dark() ജോടികളാണ്, അതിനാൽ അധിക ജോലി കൂടാതെ അവ പേജിന്റെ color-scheme പിന്തുടരുന്നു. ഇത് ഒരു തവണ സെറ്റ് ചെയ്യുക:

:root {
  color-scheme: light dark;
}

സിസ്റ്റം സെറ്റിംഗ് കണക്കിലെടുക്കാതെ ഒരു സ്കീം നിർബന്ധമാക്കാൻ, <html> പോലുള്ള ഒരു പൂർവ്വികനിൽ class="dark" അല്ലെങ്കിൽ data-theme="dark" (അല്ലെങ്കിൽ "light") വെക്കുക. കമ്പോണന്റുകൾ ഇവ രണ്ടിനോടും പ്രതികരിക്കുന്നു.

നിങ്ങൾ സ്വന്തം നിറങ്ങൾ സെറ്റ് ചെയ്യുകയാണെങ്കിൽ, രണ്ട് സ്കീമുകളും നൽകുക, അല്ലെങ്കിൽ നിങ്ങളുടെ ഡാർക്ക് മോഡ് ലൈറ്റ് മൂല്യങ്ങൾ തന്നെ നിലനിർത്തും:

:root {
  --gbs-accent: light-dark(#7c3aed, #c4b5fd);
}

ഒരു വിഭാഗം തീം ചെയ്യുന്നത്

വേരിയബിളുകൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നതിനാൽ, ഒരു പേജിന്റെ ഭാഗത്തേക്ക് ഒരു പാലറ്റ് സ്കോപ്പ് ചെയ്യുന്നത് നിങ്ങൾ അത് എവിടെ സെറ്റ് ചെയ്യുന്നു എന്നതിന്റെ കാര്യം മാത്രമാണ്:

.admin-area {
  --gbs-accent: #0f766e;
  --gbs-radius: 4px;
}

.admin-area-ക്കുള്ളിലുള്ള എല്ലാം ടീൽ ആക്സന്റ് ഉപയോഗിക്കുന്നു; പേജിന്റെ ബാക്കി ഭാഗം അങ്ങനെയല്ല.

ഒരു കമ്പോണന്റ് തീം ചെയ്യുന്നത്

ഷെയേർഡ് വേരിയബിളിന് പകരം കമ്പോണന്റിന്റെ സ്വന്തം വേരിയബിൾ സെറ്റ് ചെയ്യുക — അത് --gbs-*-നെ മറികടക്കുന്നു:

.danger-zone .bt-root {
  --bt-bg: #b91c1c;
}

അല്ലെങ്കിൽ ഇൻലൈനായി, ഒരൊറ്റ ഇൻസ്റ്റൻസിന്:

<Input style={{ "--in-radius": "999px" } as CSSProperties} />

ഓരോ കമ്പോണന്റിന്റെയും പേജ് അതിന്റെ സ്വന്തം വേരിയബിളുകൾ ലിസ്റ്റ് ചെയ്യുന്നു.

Tailwind-നൊപ്പം

എല്ലാ കമ്പോണന്റ് റൂളുകളും CSS components ലെയറിലാണ്, അതിനാൽ className അല്ലെങ്കിൽ classNames വഴി കടന്നുപോകുന്ന ഒരു യൂട്ടിലിറ്റി ക്ലാസ് !important ഇല്ലാതെ തന്നെ അവയെ മറികടക്കുന്നു:

<Button className="rounded-full px-6" />

ഒറ്റത്തവണ ക്രമീകരണങ്ങൾക്ക് യൂട്ടിലിറ്റികളും പാലറ്റിന് --gbs-*-ഉം ഉപയോഗിക്കുക. നിങ്ങളുടെ ഡിസൈൻ ടോക്കണുകൾ ഇതിനകം Tailwind തീം വേരിയബിളുകൾ ആണെങ്കിൽ, രണ്ടിനെയും പരസ്പരം ഒരു തവണ ചൂണ്ടിക്കാണിക്കുക:

:root {
  --gbs-accent: var(--color-violet-600);
  --gbs-danger: var(--color-rose-600);
}

ഒരു പാലറ്റ് ഷിപ്പ് ചെയ്യുന്നതിനു മുമ്പ്

അർത്ഥം വഹിക്കുന്ന ജോടികളിൽ കോൺട്രാസ്റ്റ് പരിശോധിക്കുക: --gbs-bg-ൽ --gbs-fg, --gbs-bg-ൽ --gbs-muted, --gbs-accent-ൽ --gbs-accent-fg. ഡിഫോൾട്ടുകൾ രണ്ട് സ്കീമുകളിലും WCAG AA പാലിക്കുന്നു; ഒരു കസ്റ്റം ആക്സന്റ് ആണ് ഇത് സാധാരണയായി നഷ്ടപ്പെടുന്ന വഴി, മിക്കപ്പോഴും സൂചനകളും കൗണ്ടറുകളും പോലുള്ള ചെറിയ ടെക്സ്റ്റിൽ.