tkcss 0.2.2

Stylisez vos interfaces tkinter avec du CSS

TkCss

Stylisez vos interfaces tkinter avec du CSS.
Classes, IDs, :hover, :focus, fichiers .css externes — tout ce que vous aimez du web, dans votre app desktop.

---

Installation

pip install tkcss

Support JPEG/WebP (optionnel) :

pip install tkcss[images]

---

Démarrage rapide

from tkcss import Window, Text, Button

app = Window("Mon App", width=400, height=250, css="""
    window { background-color: #1a1a2e; }
    text   { color: white; font-size: 18px; margin: 20px; }
    button { background-color: #e94560; color: white; padding: 10px; }
    button:hover { background-color: #c73652; }
""")

app.add(Text("Bienvenue !"))
app.add(Button("Démarrer", on_click=lambda: print("Cliqué !")))
app.center().run()

---

Fonctionnalités

• ✅ Sélecteurs — tag (button), classe (.btn), ID (#submit), inline
• ✅ Pseudo-classes — :hover et :focus simulés via les bindings tkinter
• ✅ Fichiers .css externes — Window(..., css_file="style.css")
• ✅ 6 composants — Window, Text, Button, Input, Frame, Image
• ✅ Propriétés CSS — couleurs, polices, tailles, padding, margin, cursor, relief
• ✅ 0 dépendance — Pillow optionnel pour JPEG/WebP
• ✅ Python 3.8+

---

Composants

Composant	Sélecteur CSS	Description
Window	window	Fenêtre principale
Text	text	Étiquette / texte
Button	button	Bouton cliquable
Input	input	Champ de saisie
Frame	frame	Conteneur / carte
Image	image	Affichage d'image

---

Exemples

Sélecteurs classe & ID

from tkcss import Window, Button, Text

app = Window("Sélecteurs", width=350, height=200, css="""
    .btn-primary        { background-color: #e94560; color: white; padding: 10px; }
    .btn-primary:hover  { background-color: #c73652; }
    #titre              { color: #7b61ff; font-size: 18px; font-weight: bold; }
""")

app.add(Text("TkCss", css_id="titre"))
app.add(Button("Cliquer", css_class="btn-primary"))
app.center().run()

Formulaire de connexion

from tkcss import Window, Text, Button, Input, Frame

app = Window("Connexion", width=380, height=400, css="""
    window      { background-color: #0f0f23; }
    .carte      { background-color: #1a1a3e; padding: 20px; margin: 10px; }
    input       { background-color: #0f0f23; color: #ccd6f6; width: 240px;
                  border-width: 1; padding: 8px; margin: 6px; }
    input:focus { background-color: #16163a; }
    .btn        { background-color: #e94560; color: white; font-weight: bold;
                  width: 150px; padding: 10px; margin: 10px; cursor: pointer; }
    .btn:hover  { background-color: #c73652; }
""")

email = Input(placeholder="Email")
mdp   = Input(placeholder="Mot de passe", password=True)

carte = Frame(css_class="carte")
carte.add(email).add(mdp)
carte.add(Button("Se connecter", on_click=lambda: print(email.get()), css_class="btn"))

app.add(Text("Connexion", style={"color": "white", "font-size": "20px", "margin": "20px"}))
app.add(carte)
app.center().run()

Fichier .css externe

/* style.css */
window        { background-color: #f8f9fa; }
text          { color: #333; font-family: Helvetica; }
button        { background-color: #28a745; color: white; padding: 8px; }
button:hover  { background-color: #218838; }

from tkcss import Window, Text, Button

app = Window("App", width=400, height=300, css_file="style.css")
app.add(Text("Bonjour !"))
app.add(Button("Valider"))
app.center().run()

---

Propriétés CSS supportées

Catégorie	Propriétés
Couleurs	color, background-color, background
Typographie	font-family, font-size, font-weight, font-style, text-decoration, text-align, wraplength
Dimensions	width, height, padding, margin, margin-top/bottom/left/right
Bordure	border-width, relief
Interaction	cursor, placeholder-color

border-radius, box-shadow, opacity, transition et les gradients ne sont pas supportés par tkinter et sont ignorés silencieusement.

---

Licence

MIT — Libre d'utilisation, modification et distribution.