Files
design-system/tailwind.css

74 lines
2.8 KiB
CSS

/* ==========================================================================
@transformer/ui — tailwind.css
Pont Tailwind 4 pour les sites qui l'utilisent (racine astro-site-cerveau).
À importer APRÈS tailwindcss et les tokens :
@import "tailwindcss";
@import "@transformer/ui/tokens.css";
@import "@transformer/ui/theme/mon-site.css";
@import "@transformer/ui/tailwind.css";
Mappe les rôles vers les namespaces @theme SANS collision de nom (pas de
cycle var()). Les namespaces qui collisionnent avec nos tokens
(--font-*, --radius-*, --shadow-*, --ease-*) ne sont PAS mappés :
utiliser la syntaxe var arbitraire de Tailwind 4, qui lit directement
le token à l'exécution :
font-(family-name:--font-heading) · rounded-(--radius-md)
shadow-(--shadow-md) · ease-(--ease-out)
========================================================================== */
@theme inline {
/* Couleurs — utilitaires bg-primary, text-text-muted, border-border, etc. */
--color-bg: var(--bg);
--color-bg-alt: var(--bg-alt);
--color-surface: var(--surface);
--color-surface-2: var(--surface-2);
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-text-subtle: var(--text-subtle);
--color-border: var(--border);
--color-border-strong: var(--border-strong);
--color-primary: var(--primary);
--color-primary-hover: var(--primary-hover);
--color-on-primary: var(--on-primary);
--color-accent: var(--accent);
--color-on-accent: var(--on-accent);
--color-link: var(--link);
--color-link-hover: var(--link-hover);
--color-focus-ring: var(--focus-ring);
--color-success: var(--success);
--color-warning: var(--warning);
--color-danger: var(--danger);
/* Tailles de texte — text-xs … text-4xl (échelle fluide du DS) */
--text-xs: var(--fs-xs);
--text-sm: var(--fs-sm);
--text-base: var(--fs-base);
--text-lg: var(--fs-lg);
--text-xl: var(--fs-xl);
--text-2xl: var(--fs-2xl);
--text-3xl: var(--fs-3xl);
--text-4xl: var(--fs-4xl);
/* Interlignes — leading-tight / leading-base / leading-loose */
--leading-tight: var(--lh-tight);
--leading-base: var(--lh-base);
--leading-loose: var(--lh-loose);
/* Graisses — font-regular / font-medium / font-semibold / font-bold */
--font-weight-regular: var(--fw-regular);
--font-weight-medium: var(--fw-medium);
--font-weight-semibold: var(--fw-semibold);
--font-weight-bold: var(--fw-bold);
/* Spacing nommé — p-2xs … gap-3xl (en plus de l'échelle numérique TW) */
--spacing-2xs: var(--space-2xs);
--spacing-xs: var(--space-xs);
--spacing-sm: var(--space-sm);
--spacing-md: var(--space-md);
--spacing-lg: var(--space-lg);
--spacing-xl: var(--space-xl);
--spacing-2xl: var(--space-2xl);
--spacing-3xl: var(--space-3xl);
}