/* ============================================================ DESIGN SYSTEM v6 — THÈME « Puissant » ============================================================ Identité noir et cramoisi, à fort contraste : angles nets, bordures épaisses, ombres portées dures, transitions immédiates. Activé par . Voir theme-solaire.css pour le mode d'emploi complet. ============================================================ */ /* ============================================================ 0. PRIMITIVES DE MARQUE Les neutres restent ceux de « Moderne » (--base-neutral-*) : le contraste de ce thème vient de leurs extrêmes (0 et 950), pas d'une nouvelle teinte de gris. ============================================================ */ :root { /* Cramoisi — couleur d'action / marque */ --base-puissant-crimson-50: #fff1f1; --base-puissant-crimson-100: #ffe1e1; --base-puissant-crimson-200: #ffc7c7; --base-puissant-crimson-300: #ff9d9d; --base-puissant-crimson-400: #fd6767; --base-puissant-crimson-500: #f13838; --base-puissant-crimson-600: #dc1f1f; --base-puissant-crimson-700: #b91818; --base-puissant-crimson-800: #981818; --base-puissant-crimson-900: #7e1a1a; --base-puissant-gradient: linear-gradient(135deg, var(--base-puissant-crimson-600), var(--base-neutral-950)); --base-puissant-mesh: radial-gradient(at 20% 80%, var(--base-puissant-crimson-200) 0, transparent 45%), radial-gradient(at 80% 20%, var(--base-neutral-300) 0, transparent 45%); } /* ============================================================ 1. COULEURS — Thème « Puissant » Contraste maximal : blanc/noir purs, aucune nuance tiède. ============================================================ */ [data-theme-style="puissant"] { --surface-base: light-dark(var(--base-neutral-0), var(--base-neutral-950)); --surface-raised: light-dark(var(--base-neutral-0), var(--base-neutral-925)); --surface-sunken: light-dark(var(--base-neutral-100), var(--base-neutral-1000)); --surface-overlay: light-dark(color-mix(in srgb, var(--base-neutral-0) 92%, transparent), color-mix(in srgb, var(--base-neutral-950) 94%, transparent)); --surface-glass: light-dark(color-mix(in srgb, var(--base-neutral-0) 75%, transparent), color-mix(in srgb, var(--base-neutral-950) 78%, transparent)); --surface-inverse: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --text: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --text-secondary: light-dark(var(--base-neutral-700), var(--base-neutral-300)); --text-tertiary: light-dark(var(--base-neutral-500), var(--base-neutral-400)); --text-inverse: light-dark(var(--base-neutral-0), var(--base-neutral-950)); --text-on-action: light-dark(var(--base-neutral-0), var(--base-neutral-950)); --text-link: light-dark(var(--base-puissant-crimson-700), var(--base-puissant-crimson-400)); --text-link-hover: light-dark(var(--base-puissant-crimson-800), var(--base-puissant-crimson-300)); --text-code: light-dark(var(--base-puissant-crimson-700), var(--base-puissant-crimson-400)); --text-code-accent: light-dark(var(--base-neutral-700), var(--base-neutral-300)); --text-marker: light-dark(var(--base-puissant-crimson-600), var(--base-puissant-crimson-500)); --border: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --border-muted: light-dark(var(--base-neutral-300), var(--base-neutral-700)); --border-strong: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --border-field: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --border-focus: light-dark(var(--base-puissant-crimson-600), var(--base-puissant-crimson-500)); --border-accent: light-dark(var(--base-puissant-crimson-600), var(--base-puissant-crimson-500)); --action-primary: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --action-primary-hover: light-dark(var(--base-puissant-crimson-700), var(--base-puissant-crimson-500)); --action-primary-active: light-dark(var(--base-puissant-crimson-800), var(--base-puissant-crimson-400)); --action-secondary: light-dark(var(--base-neutral-100), var(--base-neutral-800)); --action-secondary-hover: light-dark(var(--base-neutral-200), var(--base-neutral-700)); --action-danger: light-dark(var(--base-puissant-crimson-700), var(--base-puissant-crimson-500)); --action-danger-hover: light-dark(var(--base-puissant-crimson-800), var(--base-puissant-crimson-400)); --status-primary-background: light-dark(var(--base-neutral-950), var(--base-neutral-0)); --status-primary-foreground: light-dark(var(--base-neutral-0), var(--base-neutral-950)); --status-primary-border: transparent; --selection-background: light-dark(var(--base-puissant-crimson-200), var(--base-puissant-crimson-800)); --selection-foreground: light-dark(var(--base-puissant-crimson-900), var(--base-puissant-crimson-100)); --brand-gradient: var(--base-puissant-gradient); --brand-mesh: var(--base-puissant-mesh); --scrollbar-track: light-dark(var(--base-neutral-100), var(--base-neutral-900)); --scrollbar-thumb: light-dark(var(--base-neutral-400), var(--base-neutral-600)); --scrollbar-thumb-hover: light-dark(var(--base-neutral-950), var(--base-neutral-0)); } /* ============================================================ 2. ESPACES — Thème « Puissant » Compact et dense : pas de place perdue. ============================================================ */ [data-theme-style="puissant"] { --space-inline-gap: var(--base-space-2); --space-stack-gap: var(--base-space-3); --space-group-gap: var(--base-space-5); --space-section-gap: var(--base-space-12); --space-page-padding: var(--base-space-5); --space-card-padding: var(--base-space-5); --space-dialog-padding: var(--base-space-6); --space-fieldset-padding: var(--base-space-5); --space-demo-padding: var(--base-space-5); --space-button-padding-x: var(--base-space-4); --space-button-padding-y: var(--base-space-2); --space-button-padding-x-sm: var(--base-space-2\.5); --space-button-padding-y-sm: var(--base-space-1); --space-button-padding-x-lg: var(--base-space-6); --space-button-padding-y-lg: var(--base-space-2\.5); --space-input-padding-x: var(--base-space-3); --space-input-padding-y: var(--base-space-2); --space-badge-padding-x: var(--base-space-2); --space-badge-padding-y: var(--base-space-0\.5); } /* ============================================================ 3. LAYOUT PRINCIPAL — Thème « Puissant » Angles nets partout, bordures nettement plus épaisses. ============================================================ */ [data-theme-style="puissant"] { --layout-content-width: var(--base-width-lg); --layout-border-width: 2px; --layout-radius-card: var(--base-radius-none); --layout-radius-button: var(--base-radius-none); --layout-radius-button-sm: var(--base-radius-none); --layout-radius-button-lg: var(--base-radius-none); --layout-radius-input: var(--base-radius-none); --layout-radius-badge: var(--base-radius-sm); --layout-radius-avatar: var(--base-radius-sm); --layout-radius-dialog: var(--base-radius-none); --layout-radius-tag: var(--base-radius-sm); --layout-radius-checkbox: var(--base-radius-none); --layout-avatar-size: var(--base-space-10); --layout-avatar-size-sm: var(--base-space-8); --layout-avatar-size-lg: var(--base-space-14); } /* ============================================================ 4. OMBRES — Thème « Puissant » Portées dures, décalées, sans flou : effet « tamponné ». ============================================================ */ [data-theme-style="puissant"] { --shadow-elev-low: 2px 2px 0 light-dark(color-mix(in srgb, var(--base-neutral-950) 90%, transparent), color-mix(in srgb, var(--base-neutral-1000) 90%, transparent)); --shadow-elev-mid: 4px 4px 0 light-dark(color-mix(in srgb, var(--base-neutral-950) 90%, transparent), color-mix(in srgb, var(--base-neutral-1000) 90%, transparent)); --shadow-elev-high: 6px 6px 0 light-dark(color-mix(in srgb, var(--base-neutral-950) 90%, transparent), color-mix(in srgb, var(--base-neutral-1000) 90%, transparent)); --shadow-focus-ring: 0 0 0 3px light-dark( color-mix(in srgb, var(--base-puissant-crimson-600) 35%, transparent), color-mix(in srgb, var(--base-puissant-crimson-400) 40%, transparent)); } [data-theme-style="puissant"] { --shadow-button: var(--shadow-elev-low); --shadow-button-hover: var(--shadow-elev-mid); --shadow-card-elevated: var(--shadow-elev-mid); --shadow-card-interactive: var(--shadow-elev-low); --shadow-card-interactive-hover: var(--shadow-elev-high); --shadow-glow-accent: 0 0 0 3px color-mix(in srgb, var(--base-puissant-crimson-600) 50%, transparent); --shadow-gradient-card: var(--shadow-elev-mid); --shadow-gradient-card-hover: var(--shadow-elev-high); } /* ============================================================ 5. ANIMATIONS — Thème « Puissant » Immédiates : pas de ressort, pas de retenue. ============================================================ */ [data-theme-style="puissant"] { --motion-fast: 80ms var(--base-ease-in); --motion-normal: var(--base-duration-fast) var(--base-ease-in); --motion-slow: var(--base-duration-normal) var(--base-ease-in); --motion-spring: var(--base-duration-fast) var(--base-ease-in); --motion-float-distance: 4px; --motion-float-duration: 1.6s; --motion-glow-duration: 0.8s; --motion-gradient-duration: 3s; --motion-shimmer-duration: 1s; } /* ============================================================ 6. TYPOGRAPHIE — Thème « Puissant » Titres Industrial condensés, interface en Mono Slab façon tampon/étiquette, graisses lourdes, interlettrage serré. ============================================================ */ [data-theme-style="puissant"] { --font-heading: var(--base-font-industrial); --font-body: var(--base-font-neo-grotesque); --font-ui: var(--base-font-mono-slab); --font-code: var(--base-font-mono-slab); --weight-display: var(--base-weight-black); --weight-heading: var(--base-weight-black); --weight-body: var(--base-weight-regular); --weight-strong: var(--base-weight-black); --weight-ui: var(--base-weight-bold); --leading-heading: var(--base-leading-none); --leading-body: var(--base-leading-normal); --leading-paragraph: var(--base-leading-normal); --tracking-display: var(--base-tracking-tight); --tracking-heading: var(--base-tracking-normal); --tracking-ui: var(--base-tracking-widest); }