Ploxion-Theme — système de thèmes UI

Skins commutables : Windows 11/XP, macOS, cyberpunk, nature… tout l'imaginable

José Gasser (J0bot) · AGPL-3.0

Résumé

Système de thèmes du XERB0XI0N : chaque thème UI est un ploxion activable qui ne change que l'apparence (un set de CSS custom properties posé via data-theme), jamais la structure ni les données. Catalogue de ~18 thèmes (tokens prêts dans themes.css) + roadmap (tokens → chrome → textures → éditeur de thème).

§1Spécification

ploxion-theme — spécification du système de thèmes

« Faire plein de styles d'UI différents… le theme Windows 11, Windows XP, tous les thèmes possibles et imaginables » (José). Chaque thème = un ploxion activable. Statut « ? » — à valider. Lane code = web ; ici = la spec + les tokens prêts (themes.css).

Principe

Un ploxion-theme ne change QUE l'apparence — jamais la structure ni les données. C'est un skin : on doit pouvoir switcher live sans recharger, sans rien casser.
Mécanisme : un attribut data-theme="<slug>" sur <html> + un set de CSS custom properties par thème (cf themes.css). Le reste de l'UI ne lit QUE les variables (var(--accent), var(--radius)…), jamais une couleur en dur.
Contrat de tokens (le minimum qu'un thème doit définir) : --bg --surface --surface-2 --fg --muted --accent --accent-2 --border --radius --shadow --font --font-mono --chrome. --chrome = indice de style de châssis/fenêtre (floating, mica, luna, bevel, aqua, crt, glass, a11y…) que le window-manager des ploxions peut interpréter pour la barre de titre + le koin.
Défaut = chill-tekk (l'UI actuelle). Switch : sélecteur (le koin d'un coin), ou prefers-color-scheme, ou choix de profil.

Pourquoi c'est un ploxion

Comme tout le reste : chaque thème vit dans le marketplace de ploxions, s'active/ désactive, et peut être partagé. Un xerion choisit le thème de son xer ; on peut en publier des nouveaux (communauté). « Le ui c'est le xerion qui façonne son expérience. »

Niveaux (roadmap)

v0 — tokens : themes.css (FAIT) + un <select data-theme> qui pose l'attribut + persiste (localStorage). Marche déjà sur tout ce qui lit les var(--…).
v1 — chrome : le window-manager rend la barre de titre / le koin selon --chrome (mica vs luna vs bevel vs aqua…), pas que les couleurs.
v2 — textures/anim : scanlines CRT, blur glass, grille vaporwave, biseaux win95, ripple material — couches optionnelles par thème.
v3 — éditeur de thème : un ploxion qui édite les tokens live (lié au designer de ploxion) → créer/forker/partager son thème.

Intégration (pour la lane web)

Importer themes.css. Refactor progressif : remplacer les couleurs en dur des vues par les var(--…). Poser data-theme sur <html> (défaut chill-tekk).
Rendus 3D : la shotlist Blender C7 décline ces thèmes (planche comparative).

Catalogue

Voir CATALOGUE.md (≈18 thèmes : win11, winxp, win95, macos-aqua, macos-modern, ios, material, kde, gnome, terminal-green, amber-crt, vaporwave, cyberpunk, nature, brutalist, newspaper, e-ink, glass, high-contrast). Slugs wiki = ui-<id>, ombrelle = ploxion-theme.

Spec ploxion-theme · XERB0XI0N · J0BOT · 2026-06-18 · « ? »

§2CSS au lexique (convention + migration)

CSS ↔ Lexique XERB0XI0N — convention + plan de migration

But (José) : « mettre à jour tout le CSS par rapport au lexique — tout est le xerboxion ». On ne réécrit pas les 18k lignes d'un coup (lane web + CSS baké dans l'image). On pose la convention canonique (xerboxion.css + themes.css) et on migre par vagues. Statut « ? ».

Fichiers livrés (à importer par la lane web)

themes.css — les tokens par thème, namespacés --xb-* (18 thèmes, data-theme).
xerboxion.css — la couche de base : unité bion, 8 modes Vecteur Xerion, et les classes-lexique (.xer .koin .kion .bion .cubion .ploxion .wormion .portion .tsoin .xion .trion) câblées aux tokens.
Ordre de chargement : themes.css puis xerboxion.css puis les CSS de page.

Convention de nommage (lexique)

Tokens : tout préfixé --xb-… (couleurs/typo/géométrie) ; espacement = multiples de --xb-bion (la brique) ; modes = --xb-mode-<axe>.
Classes structurelles = les mots du lexique, en BEM : .<terme> · .<terme>__<part> · .<terme>--<variante>. Ex : .ploxion, .ploxion__koin, .ploxion--winxp. Un thème = .<comp>--<ui-slug>.

Table de migration (actuel → lexique canonique)

Actuel (site)	→ Lexique	Pourquoi
`--accent` `--muted` `--text-color`	`--xb-accent` `--xb-muted` `--xb-fg`	namespace xerboxion
`--dark-bg` `--darker-bg` `--light-bg`	`--xb-bg` `--xb-surface` `--xb-surface-2`	surfaces
`--window-bg` `--window-border`	`--xb-surface` `--xb-border`	une fenêtre = un ploxion
`--button-bg/-hover` `--input-bg/-border/-focus`	tokens `.xb-btn` / `.xb-field`	composants de base
`--chasseur … --diplomate`	`--xb-mode-chasseur … -diplomate`	8 modes Vecteur Xerion (déjà lexique ✓)
`--neon-*` `--terminal-green` `--glitch-offset`	thème `ui-cyberpunk` / `ui-terminal-green`	couleurs spécifiques d'un thème, pas globales
`.window` `.modal-` `.dropdown-`	`.ploxion` `.ploxion__barre` …	toute fenêtre/overlay = ploxion
`.koin-grid`	`.kion-grid`	une grille de koins = un kion
`.koin-tile` `.service-card` `.dd-lp-tile`	`.bion` (tuile) / `.koin__tile`	brique de contenu = bion
`.koin-menu__` `.desktop-dock` `.dd-launchpad` `.mcd-`	`.kion-dock` / `.koin-dock` (mobile)	dock de ploxions = kion
`.xr-` `.xr-content` `.xr-xerion-panel__`	`.xer-` / `.ploxion__`	garder le préfixe `xer` (cohérent), ou `.ploxion__xer`
`.timeline-item` `.timeline-content` `.timeline-dot`	`.tsoin` `.tsoin__…` `.tsoin__point`	la timeline = des tsoins
`.mw-node` `.mw-cluster-edge` `.mcd-synapses`	`.xion` (arêtes) / `.bion` (nœuds)	le graphe = des bions reliés par des xions
`.cyber-*` `.cyberpunk-button`	scoper sous `[data-theme="cyberpunk"]`	déco de thème, pas structure
`.paper-content` `.markdown-content`	garder (contenu) ; styliser via tokens	neutre

Plan par vagues (commencer à s'en sortir)

V1 — tokens : importer themes.css+xerboxion.css, poser data-theme sur <html>, remplacer les couleurs en dur des CSS par var(--xb-…). (gros gain, faible risque)
V2 — composants : .window/.modal/.dropdown → .ploxion* ; .*-tile/.service-card → .bion. Un fichier CSS à la fois (alias temporaires pour ne rien casser).
V3 — structure : .koin-grid→.kion-grid, .timeline-*→.tsoin*, docks→.kion-dock. Mettre à jour les vues Blade en parallèle (lane web).
V4 — thèmes : déplacer cyberpunk.css/mobile-chill.css sous [data-theme].

Astuce zéro-casse : garder les anciennes classes en alias (.window{ @extend .ploxion } ou double-classe) pendant la transition, puis retirer.

Lanes

cloudion (doc/spec) : convention + themes.css/xerboxion.css/cette map. Lane web : importer, migrer par vagues, redeployer (le CSS est baké). Réfs Blender : shotlist C7.

CSS↔Lexique · XERB0XI0N · J0BOT · 2026-06-18 · « ? »

Statut : draft · Licence : AGPL-3.0 · ploxion-theme