# कॉम्पोनेंट स्टाइल करना

> ComponentStyle — किसी कॉम्पोनेंट के रंग, बॉर्डर, कोनों, गैप, फ़ॉन्ट और शैडो के लिए फ़्लुएंट API।

Source: https://crossfly.dev/hi/docs/ui/theming/styling-components — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# कॉम्पोनेंट स्टाइल करना (`ComponentStyle`)

`ComponentStyle` किसी कॉम्पोनेंट के **पूरे** रूप-रंग को समाहित करता है। इसे **फ़्लुएंट API** से बनाया जाता है और
`componente.style(...)` से लागू किया जाता है।

## पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle, Styles
import dev.crossfly.ui.graphics.*; // Relative

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // शून्य से बना ComponentStyle, .style(...) के साथ लागू किया गया
      Button salvar = new Button("Salvar");
      salvar.style(new ComponentStyle()
         .backColor(0xFF0173ED)          // नीला बैकग्राउंड (ARGB)
         .textColor(0xFFFFFFFF)          // सफेद टेक्स्ट
         .borderColor(0)                 // बिना बॉर्डर
         .borderRadius(0.6f)             // गोल कोने
         .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))  // आंतरिक पैडिंग (l,t,r,b)
         .autoWidth(Relative.ofScreen(0.6f))
         .pressable());                  // टच पर प्रतिक्रिया देता है
      add(LAY_AUTO, salvar);

      // अनुशंसित: थीम की स्टाइल से व्युत्पन्न करें और केवल जरूरी को समायोजित करें
      Button tema = new Button("Cor do tema");
      tema.style(Styles.button()
         .backColor(Styles.primaryColor) // थीम का PalColor (light/dark का अनुसरण करता है)
         .borderRadius(1f));
      add(LAY_AUTO, tema);
   }
}
```
> नीचे दिए गए स्निपेट **सिर्फ़ मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर वाले `MainWindow` कंकाल में रखें।

## बुनियादी उपयोग
```java
Button salvar = new Button("Salvar");
salvar.style(new ComponentStyle()
   .backColor(0xFF0173ED)              // नीला बैकग्राउंड (ARGB)
   .textColor(0xFFFFFFFF)              // सफेद टेक्स्ट
   .borderColor(0)                     // बिना बॉर्डर
   .borderRadius(0.6f)                 // गोल कोने
   .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))      // आंतरिक पैडिंग
   .pressable());                      // टच पर प्रतिक्रिया देता है
```

## स्थिति (state) के अनुसार लागू करना
```java
salvar.style(normal)
      .focusedStyle(comFoco)     // जब तक फोकस में है
      .pressedStyle(apertado);   // जब तक दबाया हुआ है
```

## किसी Skin स्टाइल से शुरू करना (अनुशंसित)
शून्य से बनाने के बजाय, थीम के फ़ॉन्ट/गैप/रंग विरासत में पाने के लिए किसी `Skin` स्टाइल से **व्युत्पन्न (derive)** करें:
```java
// वर्तमान थीम की बटन स्टाइल लेता है और केवल जरूरी को समायोजित करता है
salvar.style(Styles.button()
   .backColor(Styles.primaryColor)     // थीम का primary रंग उपयोग करता है
   .borderRadius(1f));
```

## मुख्य प्रॉपर्टीज़ (फ़्लुएंट सेटर)
| Setter | प्रभाव |
|---|---|
| `backColor(int\|PalColor)` | पृष्ठभूमि का रंग (`0` = पारदर्शी) |
| `textColor(int\|PalColor)` | टेक्स्ट का रंग |
| `borderColor(int)` · `borderThick(float)` | बॉर्डर (`0` = कोई बॉर्डर नहीं) |
| `borderRadius(float)` / `borderRadius(tl,tr,bl,br)` | गोल कोने |
| `font(Font)` | फ़ॉन्ट — उदा. `Font.get(1.25f, BOLD)` |
| `ingap(Gap)` / `outgap(Gap)` | आंतरिक पैडिंग / बाहरी मार्जिन |
| `icongap(Gap)` · `iconColor(int)` | आइकन की जगह और रंग |
| `autoWidth(Relative)` / `autoHeight(Relative)` | स्वचालित उत्तरदायी (responsive) आकार |
| `textAlign(Position h, Position v)` | टेक्स्ट का संरेखण |
| `shadow(offX, offY, blur, color)` | शैडो |
| `pressable()` | दबाने पर हाइलाइट सक्षम करता है |

## रंग: `int` ARGB या `PalColor`
- **`int` ARGB** (`0xAARRGGBB`) — स्थिर रंग: `0xFF0173ED`।
- **`PalColor`** (`Styles`/`ColorScheme` से) — **थीम** का रंग, जो हल्के/गहरे मोड में बदलने पर स्वयं
  फिर से हल हो जाता है: `Styles.primaryColor`, `Styles.textColor`। थीम के साथ चलने के लिए **`PalColor` को प्राथमिकता दें**।

## सर्वोत्तम अभ्यास
- सब कुछ फिर से बनाने के बजाय `Styles.button()`/`Styles.label()`/`Styles.textField()` से व्युत्पन्न करें।
- थीम के `PalColor` का उपयोग करें (`Styles.primaryColor`, `cs.surface`) — स्थिर रंग गहरे मोड का अनुसरण नहीं करता।
- रिक्ति (spacing) के लिए `Gap.ofFont(...)` का उपयोग करें (फ़ॉन्ट के साथ स्केल होता है) — कभी भी स्थिर पिक्सेल नहीं।

## आम गलतियाँ
- `setStyle(...)` कॉल करना — विधि **`style(...)`** है।
- `new Color(...)` का उपयोग करना — `Color` क्लास हटा दी गई है; `int` ARGB या `ColorUtils` का उपयोग करें।
- पूरी UI में स्थिर रंग और फिर हैरान होना कि गहरा मोड "काम नहीं करता"।

## यह भी देखें
- [रंग योजनाएँ](/docs/ui/theming/color-schemes) · [हल्का/गहरा मोड](/docs/ui/theming/dark-mode) · [Skins](/docs/ui/theming/skins)