തീമിംഗ് | GramproKit 2.0.0-beta

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

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

css

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

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

ഒരു കമ്പോണന്റിനുള്ളിലല്ല, :root-ൽ --gbs-* സെറ്റ് ചെയ്യുക. ഇൻഹെറിറ്റൻസിലൂടെയാണ് കമ്പോണന്റുകൾ ഈ മൂല്യങ്ങൾ വായിക്കുന്നത്, അതിനാൽ ഒരു പൂർവ്വികനിൽ (ancestor) നിങ്ങൾ സെറ്റ് ചെയ്യുന്നതെന്തും അതിനു താഴെയുള്ള ഓരോ കൺട്രോളിലേക്കും എത്തുന്നു.

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

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

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

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

css

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

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

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

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

Variable	Default	Used for
`--gbs-bg`	`#ffffff` / `#0b0b0e`	കമ്പോണന്റ് ബാക്ക്ഗ്രൗണ്ട്.
`--gbs-fg`	`#18181b` / `#f4f4f5`	ബോഡി ടെക്സ്റ്റ്.
`--gbs-muted`	`#71717a` / `#a1a1aa`	സൂചനകൾ, കൗണ്ടറുകൾ, ദ്വിതീയ ടെക്സ്റ്റ്.
`--gbs-subtle`	`#f4f4f5` / `#1c1c20`	സെക്കൻഡറി ബട്ടൺ പോലുള്ള ശാന്തമായ ഫില്ലുകൾ.
`--gbs-hover`	`#f4f4f5` / `#1f1f23`	ബട്ടണുകളിലും മെനു ഐറ്റങ്ങളിലും ഹോവർ ബാക്ക്ഗ്രൗണ്ട്.
`--gbs-input-bg`	`#ffffff` / `#121216`	ഒരു ഫീൽഡിന്റെ ഉള്ളിൽ.
`--gbs-readonly-bg`	`#fafafa` / `#0e0e12`	എഡിറ്റ് ചെയ്യാൻ കഴിയാത്ത ഒരു ഫീൽഡ്.
`--gbs-header-bg`	`#fafafa` / `#111114`	ഗ്രിഡ് ഹെഡർ, മോഡൽ ഫൂട്ടർ.
`--gbs-header-fg`	`#3f3f46` / `#d4d4d8`	ഗ്രിഡ് ഹെഡർ ടെക്സ്റ്റ്.

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

Variable	Default	Used for
`--gbs-border`	`#e4e4e7` / `#27272a`	പുറത്തെ ബോർഡറുകൾ.
`--gbs-border-subtle`	`#f0f0f2` / `#1c1c20`	റോ സെപ്പറേറ്ററുകളും മറ്റ് ശാന്തമായ വരകളും.
`--gbs-border-control`	`#a1a1aa` / `#52525b`	ഒരു ചെക്ക്ബോക്സിന്റെയോ റേഡിയോയുടെയോ ഔട്ട്‌ലൈൻ, ഒരു പാനൽ എഡ്ജിനേക്കാൾ കൂടുതൽ കോൺട്രാസ്റ്റ് ഇതിന് ആവശ്യമാണ്.
`--gbs-radius`	`8px`	കോർണർ റേഡിയസ്.
`--gbs-font-size`	`13px`	അടിസ്ഥാന വലുപ്പം; മറ്റെല്ലാം ഇതിനെ ആപേക്ഷികമാണ്.
`--gbs-shadow`	`0 10px 30px -8px …`	പോപ്പോവറുകളും മെനുകളും.
`--gbs-backdrop`	`rgb(9 9 11 / 0.45)` / `rgb(0 0 0 / 0.65)`	ഒരു മോഡലിനോ ഡയലോഗിനോ പിന്നിൽ.

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

Variable	Default	Used for
`--gbs-accent`	`#2563eb` / `#60a5fa`	തിരഞ്ഞെടുത്തത്, ചെക്ക് ചെയ്തത്, ആക്റ്റീവ്.
`--gbs-accent-fg`	`#ffffff` / `#0b1220`	ഒരു ആക്സന്റ് ഫില്ലിലെ ടെക്സ്റ്റ്.
`--gbs-accent-soft`	`#eff6ff` / `#172554`	ടിന്റ് ചെയ്ത ബാക്ക്ഗ്രൗണ്ടുകൾ.
`--gbs-accent-strong`	`#1d4ed8` / `#bfdbfe`	ഒരു ആക്സന്റ് ഫില്ലിന്റെ പ്രെസ്ഡ് (pressed) സ്റ്റേറ്റ്.
`--gbs-focus`	`#2563eb` / `#60a5fa`	ഫോക്കസ് റിംഗുകൾ.
`--gbs-danger`	`#dc2626` / `#f87171`	പിശകുകളും വിനാശകരമായ (destructive) പ്രവർത്തനങ്ങളും.
`--gbs-danger-fg`	`#ffffff` / `#1c0606`	ഒരു ഡേഞ്ചർ ഫില്ലിലെ ടെക്സ്റ്റ്.
`--gbs-success`	`#15803d` / `#4ade80`	പൂർത്തിയായ അപ്‌ലോഡുകൾ, സക്സസ് ടോസ്റ്റുകൾ.
`--gbs-warning`	`#d97706` / `#fbbf24`	മുന്നറിയിപ്പുകൾ.
`--gbs-info`	`--gbs-accent`-ലേക്ക് ഫാൾബാക്ക് ചെയ്യുന്നു	വിവരപ്രദമായ ഡയലോഗുകളും ടോസ്റ്റുകളും.

ഗ്രിഡ് റോകൾ

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

Variable	Default	Used for
`--gbs-row-alt`	`#fcfcfd` / `#0e0e12`	സ്ട്രൈപ്പ് ചെയ്ത റോകൾ.
`--gbs-row-hover`	`#f4f4f5` / `#18181c`	ഹോവർ ചെയ്ത റോ.
`--gbs-row-selected`	`#eef4ff` / `#14213d`	തിരഞ്ഞെടുത്ത റോ.
`--gbs-row-selected-hover`	`#e2ecff` / `#1a2a4d`	തിരഞ്ഞെടുത്തതും ഹോവർ ചെയ്തതും.
`--gbs-cell-px`	`12px`	തിരശ്ചീന (horizontal) സെൽ പാഡിംഗ്.
`--gbs-pin-shadow`	`rgb(0 0 0 / 0.08)` / `rgb(0 0 0 / 0.5)`	ഒരു പിൻ ചെയ്ത കോളത്തിന്റെ അറ്റം.

ഡാർക്ക് മോഡ്

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

css

:root {
  color-scheme: light dark;
}

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

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

css

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

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

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

css

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

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

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

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

css

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

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

tsx

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

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

Tailwind-നൊപ്പം

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

tsx

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

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

css

: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 പാലിക്കുന്നു; ഒരു കസ്റ്റം ആക്സന്റ് ആണ് ഇത് സാധാരണയായി നഷ്ടപ്പെടുന്ന വഴി, മിക്കപ്പോഴും സൂചനകളും കൗണ്ടറുകളും പോലുള്ള ചെറിയ ടെക്സ്റ്റിൽ.