Pretty links

[alinekeller]

Suppression des styles spéciaux pour les liens avec la classe '.link-pretty'. La propriété 'text-decoration-color', qui permet d'obtenir le même effet sans avoir recours à des styles complexes et difficiles à maintenir, est désormais suffisamment bien implémentée dans les navigateurs web.

https://epfl-webvolution.atlassian.net/browse/WEBEVOL-211

[github-actions]

Unit Test Results

    1 files      1 suites   0s ⏱️
265 tests 230 ✔️ 0 💤   0 ❌ 35 🔥
265 runs  195 ✔️ 0 💤 35 ❌ 35 🔥

For more details on these errors, see this check.

Results for commit a441160.

♻️ This comment has been updated with latest results.

[github-actions]

🔎 Download the Backstop report for this pull request (link valid for 90 days):

• backstop-report.zip

[williambelle]

Après plusieurs tests, il me semble qu'il manque des classes pour les variantes de background.
Par exemple, une alerte avec bg-danger text-white et un lien.

elements/assets/config/mixins.scss

Lines 42 to 55 in 55285f2

	@each $color, $value in $theme-colors {
	.bg-#{$color} & {
	color: color-yiq($value);
	@include link-pretty-text-shadow($value);
	@if ($hover) {
	&:hover,
	&.hover {
	background-image: linear-gradient(gray('300') 0%, gray('300') 100%);
	}
	}
	}
	}
	}

[alinekeller]

Pour les couleurs d'arrière-plan générées automatiquement, je propose de simplement reprendre la couleur du texte pour le soulignement (en rouge ça rend mal sur tous les fonds à part le noir). La fonction Bootstrap color-yiq permet d'adapter automatiquement la couleur du texte à celle du fond, pour avoir le meilleur contraste:

Idem pour les liens avec la classe .text-white:

@williambelle @xentenza est-ce que ça vous semble ok comme ça ?

[williambelle]

Selon tes captures, ça me semble très bien.

[alinekeller]

@xentenza Est-ce que ça te convient ? Je viens de me rendre compte que cette PR est toujours ouverte, j'aurais besoin de ta validation pour finaliser les changements :)

[xentenza]

@alinekeller oups... c'est tout bon!

[alinekeller]

@xentenza @williambelle Je viens d'envoyer les corrections que j'avais proposées. Vous pouvez voir ce que ça donne (notamment les états :hover et :focus) sur la page atoms/link. La section principale ne contient plus que les trois exemples standard, sur fond gris clair et sur fond gris foncé. J'ai ajouté une section supplémentaires pour les variantes de background.

[xentenza]

@alinekeller Merci pour ta PR. Vus à la suite des liens standards, le soulignement qui disparaît dans les background dark et colorés fait bizarre, mais je ne vois pas comment tu pourrais faire autrement.

[xentenza]

@alinekeller Le bouton "Primary small" dans Atoms > Button est plus petit, ce qui introduit plusieurs modifications en cascade:

• Atoms > Upload
• Atoms > Collapse > Partial Collapse
• Content Types > Basic Page
• etc.

Si ce n'est pas voulu et tu arrives à mettre la taille d'origine, super. Sinon, on fait avec, ce n'est pas hyper dérangeant

[williambelle]

Il me semble que c'est à cause de la branche qui n'était pas à jour.