@agence-zef/astro 0.3.1 → 0.5.0

package/styles.css

@@ -0,0 +1,468 @@
+/*
+ * Habillage facultatif des composants de @agence-zef/astro : champs de formulaire (Form,
+ * AccountForm, Checkout, panier, Field / Input / Select / Checkbox), boutons, Dialog,
+ * Accordion, Popover, popups et bandeau cookies.
+ *
+ * - Importé une fois (`import "@agence-zef/astro/styles.css"` dans le gabarit).
+ * - Toutes les règles sont en `:where()` : aucune priorité, la moindre règle du site passe devant.
+ * - Tout se règle par les variables `--zef-*` ci-dessous, à redéfinir dans `:root` du site
+ *   (ex. `--zef-accent: var(--color-accent)`).
+ */
+
+:where(:root) {
+	--zef-font: inherit;
+	--zef-text: currentColor;
+	--zef-muted: color-mix(in srgb, currentColor 62%, transparent);
+	--zef-surface: #fff;
+	--zef-surface-muted: color-mix(in srgb, currentColor 5%, transparent);
+	--zef-border: color-mix(in srgb, currentColor 18%, transparent);
+	--zef-border-strong: color-mix(in srgb, currentColor 35%, transparent);
+	--zef-accent: #18181b;
+	--zef-on-accent: #fff;
+	--zef-danger: #c62828;
+	--zef-success: #2e7d32;
+	--zef-focus: 0 0 0 3px color-mix(in srgb, var(--zef-accent) 30%, transparent);
+	--zef-radius: 0.5rem;
+	--zef-radius-small: 0.25rem;
+	--zef-gap: 1rem;
+	--zef-input-height: 2.75rem;
+	--zef-input-padding: 0.75rem;
+	--zef-shadow: 0 12px 40px rgb(0 0 0 / 0.16);
+	--zef-backdrop: rgb(0 0 0 / 0.45);
+	--zef-dialog-width: 32rem;
+	--zef-popover-width: 18rem;
+	--zef-duration: 0.2s;
+}
+
+/* ---------- Formulaires ---------- */
+
+:where(.zef-account, .zef-checkout fieldset, .zef-cart-add) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--zef-gap);
+	font-family: var(--zef-font);
+}
+/* Formulaire du CMS : champs en pleine largeur ou en demi-largeur (`data-width="half"`). */
+:where(.zef-form) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--zef-gap);
+	font-family: var(--zef-font);
+}
+:where(.zef-form) > :where(*) {
+	flex: 1 1 100%;
+}
+/* Champs masqués (logique conditionnelle, erreurs vides) : `hidden` l'emporte sur `display`. */
+:where(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-field)
+	:where([hidden]) {
+	/* biome-ignore lint/complexity/noImportantStyles: `hidden` doit gagner sur tout `display` du site. */
+	display: none !important;
+}
+:where(.zef-checkout fieldset) {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+:where(.zef-checkout legend, .zef-form legend, .zef-account legend) {
+	margin-bottom: 0.5rem;
+	padding: 0;
+	font-weight: 600;
+}
+
+/* Champ : libellé au-dessus du contrôle. */
+:where(.zef-field, .zef-form__field, .zef-account__field, .zef-checkout fieldset > label) {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	min-width: 0;
+}
+:where(
+	.zef-label,
+	.zef-form__label,
+	.zef-account__field > label:not(:has(input[type="checkbox"])),
+	.zef-checkout fieldset > label
+) {
+	font-weight: 600;
+	font-size: 0.9375rem;
+}
+:where(.zef-required) {
+	color: var(--zef-danger);
+}
+:where(.zef-form__field[data-width="half"]) {
+	flex: 1 1 calc(50% - var(--zef-gap) / 2);
+}
+
+/* Zones de saisie et listes. */
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-subscriptions)
+		:is(
+			input:not(
+				[type="checkbox"],
+				[type="radio"],
+				[type="hidden"],
+				[type="file"],
+				[type="submit"],
+				[type="button"]
+			),
+			select,
+			textarea
+		)
+) {
+	box-sizing: border-box;
+	width: 100%;
+	min-height: var(--zef-input-height);
+	padding: 0 var(--zef-input-padding);
+	border: 1px solid var(--zef-border-strong);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	color: inherit;
+	font: inherit;
+	transition:
+		border-color var(--zef-duration),
+		box-shadow var(--zef-duration);
+}
+:where(textarea.zef-input, :is(.zef-form, .zef-account, .zef-cart-add) textarea) {
+	min-height: 7.5rem;
+	padding-block: var(--zef-input-padding);
+	resize: vertical;
+}
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-subscriptions)
+		:is(input, select, textarea)
+):focus-visible {
+	border-color: var(--zef-accent);
+	outline: none;
+	box-shadow: var(--zef-focus);
+}
+:where(
+	.zef-input[aria-invalid="true"],
+	.zef-select[aria-invalid="true"],
+	[data-invalid] :is(input, select, textarea)
+) {
+	border-color: var(--zef-danger);
+}
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout) :is(input, select, textarea)
+):disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+:where(.zef-form input[type="file"]) {
+	font: inherit;
+}
+
+/* Cases à cocher et boutons radio. */
+:where(
+	.zef-check,
+	.zef-form__check,
+	.zef-account label:has(> input[type="checkbox"]),
+	.zef-checkout label:has(> input:is([type="checkbox"], [type="radio"])),
+	.zef-cart-add label:has(> input[type="radio"])
+) {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.625rem;
+	font-weight: 400;
+	cursor: pointer;
+}
+:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add, .zef-cookies)
+	:where(input[type="checkbox"], input[type="radio"]) {
+	flex-shrink: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	margin: 0.125rem 0 0;
+	accent-color: var(--zef-accent);
+}
+:where(.zef-form__choices) {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+/* Aide, erreurs, messages. */
+:where(.zef-help, .zef-account__help, .zef-account__optional, .zef-checkout__optional) {
+	color: var(--zef-muted);
+	font-size: 0.875rem;
+	font-weight: 400;
+}
+:where(.zef-error, .zef-form__error, .zef-account__error, .zef-checkout__error, .zef-cart__error) {
+	margin: 0;
+	color: var(--zef-danger);
+	font-size: 0.875rem;
+}
+:where(.zef-form__status, .zef-account__notice, .zef-checkout__notice, .zef-cart__warning) {
+	margin: 0;
+	padding: 0.75rem 1rem;
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface-muted);
+}
+:where(.zef-account__success, .zef-cart__success, .zef-subscriptions__success, .zef-form__done) {
+	color: var(--zef-success);
+}
+
+/* ---------- Boutons ---------- */
+
+:where(
+	.zef-button,
+	.zef-form__submit,
+	.zef-account__submit,
+	.zef-checkout__submit,
+	.zef-cart__checkout,
+	.zef-cart-add button[type="submit"],
+	.zef-subscriptions__cancel
+) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	min-height: var(--zef-input-height);
+	padding: 0 1.25rem;
+	border: 1px solid var(--zef-accent);
+	border-radius: var(--zef-radius);
+	background: var(--zef-accent);
+	color: var(--zef-on-accent);
+	font: inherit;
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		filter var(--zef-duration),
+		opacity var(--zef-duration);
+}
+:where(.zef-button[data-variant="secondary"], .zef-subscriptions__cancel) {
+	background: transparent;
+	color: var(--zef-accent);
+}
+:where(
+	.zef-button,
+	.zef-form__submit,
+	.zef-account__submit,
+	.zef-checkout__submit,
+	.zef-cart__checkout
+):hover {
+	filter: brightness(1.12);
+}
+:where(.zef-button, .zef-form__submit, .zef-account__submit, .zef-checkout__submit):focus-visible {
+	outline: none;
+	box-shadow: var(--zef-focus);
+}
+:where(.zef-button, .zef-form__submit, .zef-account__submit, .zef-checkout__submit):disabled {
+	opacity: 0.55;
+	cursor: progress;
+}
+:where(.zef-form__submit, .zef-account__submit) {
+	align-self: flex-start;
+}
+
+/* ---------- Dialog et popups ---------- */
+
+:where(.zef-dialog, .zef-popup) {
+	box-sizing: border-box;
+	width: min(var(--zef-dialog-width), calc(100vw - 2rem));
+	max-height: calc(100dvh - 2rem);
+	padding: 0;
+	border: 0;
+	border-radius: calc(var(--zef-radius) * 1.5);
+	background: var(--zef-surface);
+	color: inherit;
+	box-shadow: var(--zef-shadow);
+	overflow: auto;
+}
+:where(.zef-dialog, .zef-popup)::backdrop {
+	background: var(--zef-backdrop);
+}
+:where(.zef-dialog__panel) {
+	position: relative;
+	padding: 2rem;
+}
+:where(.zef-dialog__close, .zef-popup__close) {
+	position: absolute;
+	top: 0.75rem;
+	right: 0.75rem;
+	display: grid;
+	place-items: center;
+	width: 2.25rem;
+	height: 2.25rem;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+:where(.zef-dialog__close, .zef-popup__close):hover {
+	background: var(--zef-surface-muted);
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-dialog[open], .zef-popup[open]) {
+		animation: zef-dialog-in var(--zef-duration) cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	:where(.zef-dialog[open])::backdrop {
+		animation: zef-fade-in var(--zef-duration) ease-out;
+	}
+	:where(.zef-dialog[data-closing]) {
+		animation: zef-dialog-out calc(var(--zef-duration) * 0.75) ease-in forwards;
+	}
+	:where(.zef-dialog[data-closing])::backdrop {
+		animation: zef-fade-out calc(var(--zef-duration) * 0.75) ease-in forwards;
+	}
+}
+@keyframes zef-dialog-in {
+	from {
+		opacity: 0;
+		transform: translateY(0.5rem) scale(0.98);
+	}
+}
+@keyframes zef-dialog-out {
+	to {
+		opacity: 0;
+		transform: translateY(0.5rem) scale(0.98);
+	}
+}
+@keyframes zef-fade-in {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes zef-fade-out {
+	to {
+		opacity: 0;
+	}
+}
+
+/* ---------- Accordéon ---------- */
+
+:where(.zef-accordion) {
+	display: flex;
+	flex-direction: column;
+	border-top: 1px solid var(--zef-border);
+}
+:where(.zef-accordion__item) {
+	border-bottom: 1px solid var(--zef-border);
+	/* Hauteur animée (navigateurs récents) ; sinon ouverture instantanée. */
+	interpolate-size: allow-keywords;
+}
+:where(.zef-accordion__summary) {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 1.125rem 0;
+	font-weight: 600;
+	list-style: none;
+	cursor: pointer;
+}
+:where(.zef-accordion__summary)::-webkit-details-marker {
+	display: none;
+}
+:where(.zef-accordion__summary)::after {
+	content: "";
+	flex-shrink: 0;
+	width: 0.5rem;
+	height: 0.5rem;
+	margin-right: 0.25rem;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	transform: translateY(-25%) rotate(45deg);
+	transition: transform var(--zef-duration);
+}
+:where(.zef-accordion__item[open] > .zef-accordion__summary)::after {
+	transform: translateY(25%) rotate(-135deg);
+}
+:where(.zef-accordion__summary):focus-visible {
+	outline: none;
+	box-shadow: var(--zef-focus);
+	border-radius: var(--zef-radius-small);
+}
+:where(.zef-accordion__content) {
+	padding-bottom: 1.25rem;
+	color: var(--zef-muted);
+}
+:where(.zef-accordion__content) > :first-child {
+	margin-top: 0;
+}
+:where(.zef-accordion__content) > :last-child {
+	margin-bottom: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-accordion__item)::details-content {
+		block-size: 0;
+		overflow: hidden;
+		transition:
+			block-size var(--zef-duration) ease,
+			content-visibility var(--zef-duration) allow-discrete;
+	}
+	:where(.zef-accordion__item[open])::details-content {
+		block-size: auto;
+	}
+}
+
+/* ---------- Popover ---------- */
+
+:where(.zef-popover) {
+	box-sizing: border-box;
+	width: min(var(--zef-popover-width), calc(100vw - 2rem));
+	margin: 0;
+	padding: 1rem;
+	border: 1px solid var(--zef-border);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	color: inherit;
+	box-shadow: var(--zef-shadow);
+	/* Positionnement d'ancre : sous le bouton qui l'ouvre, retourné s'il manque de place. */
+	position-area: block-end span-inline-end;
+	position-try-fallbacks: flip-block, flip-inline;
+	margin-block: 0.375rem;
+}
+:where(.zef-popover[data-placement="top"]) {
+	position-area: block-start span-inline-end;
+}
+:where(.zef-popover[data-placement="right"]) {
+	position-area: inline-end span-block-end;
+	margin: 0 0.375rem;
+}
+:where(.zef-popover[data-placement="left"]) {
+	position-area: inline-start span-block-end;
+	margin: 0 0.375rem;
+}
+@supports not (position-area: block-end) {
+	:where(.zef-popover) {
+		margin: auto;
+	}
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-popover) {
+		transition:
+			opacity var(--zef-duration),
+			transform var(--zef-duration),
+			overlay var(--zef-duration) allow-discrete,
+			display var(--zef-duration) allow-discrete;
+		opacity: 0;
+		transform: translateY(-0.25rem);
+	}
+	:where(.zef-popover:popover-open) {
+		opacity: 1;
+		transform: none;
+	}
+	@starting-style {
+		:where(.zef-popover:popover-open) {
+			opacity: 0;
+			transform: translateY(-0.25rem);
+		}
+	}
+}
+
+@media (max-width: 40rem) {
+	:where(.zef-form__field[data-width="half"]) {
+		flex-basis: 100%;
+	}
+}