Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Permettre d'ajouter une composante d'opacité sur les couleurs (PIX-10838) #608

Merged
merged 1 commit into from
Apr 15, 2024

Conversation

yannbertrand
Copy link
Member

@yannbertrand yannbertrand commented Apr 12, 2024

🎄 Problème

Le stockage de couleurs en hexa dans des variables CSS ne permet pas de leur ajouter une couche de transparence. Côté design on aimerait bien pouvoir le faire même si on a limité la palette de couleur.

🎁 Proposition

L'option proposée est de remplacer par le format RGB, on peut ajouter de la transparence ainsi :

.truc {
  color: rgba(var(--pix-primary-700), 0.5); // Valeur d'alpha comprise entre 0 et 1
}

🌟 Remarques

Une alternative identifiée était d'utiliser color-mix mais c'est une fonctionnalité trop récente vis à vis de notre support navigateur.

J'ai utilisé GitHub Copilot pour faire la migration, j'espère que ça n'a pas fait n'importe quoi :D

switch-to-rgb.mov

🎅 Pour tester

Comparer les palettes de couleur de la RA à côté de la prod.

@yannbertrand yannbertrand added 👀 Tech Review Needed cross-team Toutes les équipes de dev labels Apr 12, 2024
@yannbertrand yannbertrand self-assigned this Apr 12, 2024
@pix-bot-github
Copy link

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr608.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr608/environment

@xav-car
Copy link
Contributor

xav-car commented Apr 12, 2024

Les palattes sur la RA et sur ui.pix.fr semblent Rancor ✅

@pix-service-auto-merge pix-service-auto-merge merged commit b9a7775 into dev Apr 15, 2024
3 checks passed
@pix-service-auto-merge pix-service-auto-merge deleted the pix-10838-use-rgb-colors branch April 15, 2024 14:13
pix-service-auto-merge pushed a commit that referenced this pull request Apr 15, 2024
# [45.1.0](v45.0.17...v45.1.0) (2024-04-15)

### 🚀 Amélioration

- [#608](#608) Permettre d'ajouter une composante d'opacité sur les couleurs (PIX-10838)
@pix-service-auto-merge
Copy link
Contributor

🎉 This PR is included in version 45.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

xav-car pushed a commit that referenced this pull request Apr 17, 2024
# [45.1.0](v45.0.17...v45.1.0) (2024-04-15)

### 🚀 Amélioration

- [#608](#608) Permettre d'ajouter une composante d'opacité sur les couleurs (PIX-10838)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants