# തീമിംഗ്

> :root-ൽ ഒരു കൂട്ടം --gbs-* വേരിയബിളുകൾ എല്ലാ കമ്പോണന്റുകളും ഒരുമിച്ച് തീം ചെയ്യുന്നു, ആവശ്യമുള്ളപ്പോൾ ഓരോ കമ്പോണന്റിനും ഓരോ വിഭാഗത്തിനും വേണ്ടിയുള്ള ഓവർറൈഡുകളോടുകൂടി.

GramproKit 2.0.0-beta · General · ബീറ്റ (പരീക്ഷണാത്മകം; API-കൾ മാറാം) · ഉറവിടം: https://gramprokit.vercel.app/2.0.0-beta/ml/theming

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

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

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

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

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

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

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

1. **കമ്പോണന്റിന്റെ സ്വന്തം വേരിയബിൾ** — `--in-accent`, `--dg-accent`, `--ck-border` എന്നിങ്ങനെ.
   ഒരു കമ്പോണന്റ്, അല്ലെങ്കിൽ അതിന്റെ ഒരു ഇൻസ്റ്റൻസ് മാത്രം മാറ്റാൻ ഇത് സെറ്റ് ചെയ്യുക.
2. **ഷെയേർഡ് വേരിയബിൾ** — `--gbs-accent`. നിങ്ങൾ സാധാരണയായി സെറ്റ് ചെയ്യുന്നത് ഇതാണ്.
3. **DataGrid-ന്റെ വേരിയബിൾ** — `--dg-accent`, ഗ്രിഡിന്റെ സ്റ്റൈൽഷീറ്റ് ലോഡ് ചെയ്തിട്ടുണ്ടെങ്കിൽ. ഈ ഷെയേർഡ് വേരിയബിളുകൾ ഉണ്ടാകുന്നതിനു മുമ്പ്
   ഗ്രിഡ് തീം ചെയ്ത പ്രോജക്ടുകൾ ഇപ്പോഴും പ്രവർത്തിക്കാൻ ഇത് നിലനിർത്തിയിരിക്കുന്നു.
4. **ബിൽറ്റ്-ഇൻ ഡിഫോൾട്ട്** — ഒരു `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 പാലിക്കുന്നു; ഒരു കസ്റ്റം ആക്സന്റ് ആണ് ഇത് സാധാരണയായി നഷ്ടപ്പെടുന്ന വഴി, മിക്കപ്പോഴും സൂചനകളും കൗണ്ടറുകളും പോലുള്ള
ചെറിയ ടെക്സ്റ്റിൽ.