Johan LEROY
9a496abd00
Introduit une couche sémantique dans style.css (@theme) : surfaces (surface-0..3), bordures, texte (fg/muted/subtle) et accent, aliasant la palette Tailwind (rendu identique, vérifié dans le CSS produit). Ajoute les métriques du chrome IDE (--ide-*) pour la refonte à venir. Centralise deux sources uniques : lib/terminal-theme.ts (thème + police xterm) et lib/status-tokens.ts (tons de statut, dédupliqués entre BaseBadge et SessionStateBadge). Définit le thème Monaco « arboretum-dark ». Remplace les #09090b épars des composants par bg-surface-0 (ne restent que index.html et les renderers exigeant un hex concret).
95 lines
4.2 KiB
CSS
95 lines
4.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tokens de design centralisés.
|
|
Couche SÉMANTIQUE aliasant la palette Tailwind (zinc/emerald/amber/sky/red) : rendu
|
|
identique aujourd'hui, mais un point d'entrée unique pour la refonte IDE et un futur
|
|
thème clair (il suffirait de redéfinir ces variables sous [data-theme=light]). */
|
|
@theme {
|
|
--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4);
|
|
--shadow-pop: 0 12px 32px -12px rgb(0 0 0 / 0.7);
|
|
|
|
/* Surfaces : du fond le plus profond de l'app aux surfaces survolées. */
|
|
--color-surface-0: var(--color-zinc-950); /* fond application (ex-#09090b) */
|
|
--color-surface-1: var(--color-zinc-900); /* cartes, panneaux */
|
|
--color-surface-2: var(--color-zinc-800); /* boutons, chips */
|
|
--color-surface-3: var(--color-zinc-700); /* survol des surfaces */
|
|
|
|
/* Bordures. */
|
|
--color-border: var(--color-zinc-800);
|
|
--color-border-strong: var(--color-zinc-700);
|
|
|
|
/* Texte. */
|
|
--color-fg: var(--color-zinc-200);
|
|
--color-fg-muted: var(--color-zinc-400);
|
|
--color-fg-subtle: var(--color-zinc-500);
|
|
|
|
/* Accent (interactions, focus). */
|
|
--color-accent: var(--color-emerald-600);
|
|
--color-accent-hover: var(--color-emerald-500);
|
|
}
|
|
|
|
/* Métriques du chrome IDE (barres, onglets, lignes). Consommées via des valeurs
|
|
arbitraires Tailwind, ex. h-[var(--ide-tab-h)]. */
|
|
:root {
|
|
--ide-activitybar-w: 3rem;
|
|
--ide-titlebar-h: 2.25rem;
|
|
--ide-tab-h: 2.25rem;
|
|
--ide-statusbar-h: 1.5rem;
|
|
--ide-row-h: 1.75rem;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-surface-0);
|
|
color: var(--color-fg);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@layer base {
|
|
/* Tailwind v4 ne met plus cursor:pointer sur les boutons : on le rétablit
|
|
(sauf désactivés, qui gardent le curseur par défaut / not-allowed). */
|
|
button:not(:disabled),
|
|
[role='button']:not([aria-disabled='true']) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Champs : rayon unifié + anneau de focus visible (absent auparavant). */
|
|
.input {
|
|
@apply w-full rounded-lg border border-border-strong bg-surface-0 px-2.5 py-1.5 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus-visible:border-zinc-500 focus-visible:ring-2 focus-visible:ring-accent-hover/40;
|
|
}
|
|
|
|
/* Boutons : socle CSS pour les usages hors composant (ex. RouterLink class="btn").
|
|
Le composant BaseButton réplique ces variantes et ajoute tailles / loading / focus. */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-strong bg-surface-2 px-3 py-1.5 text-sm font-medium text-fg transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-hover/70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-hover/70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-red-900 bg-red-950 px-3 py-1.5 text-sm font-medium text-red-300 transition-colors hover:bg-red-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-zinc-300 transition-colors hover:bg-surface-2/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-hover/70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium;
|
|
}
|
|
|
|
/* Cartes : factorise le motif répété dans les listes/sections/formulaires. */
|
|
.card {
|
|
@apply rounded-xl border border-border bg-surface-1/50 p-3;
|
|
}
|
|
.card-inset {
|
|
@apply rounded-lg border border-border bg-surface-0/40 p-2;
|
|
}
|
|
}
|