From 685ee9a7252ca43aeca502ad324732d0d9cbb141 Mon Sep 17 00:00:00 2001
From: JP Simonnet <jean-philippe.simonnet@developpement-durable.gouv.fr>
Date: Tue, 31 Oct 2023 13:38:49 +0100
Subject: [PATCH] changement des couleurs et premier CSS pour modele lien

---
 design_system_admin/modeles/dsfr_encadre.html |  66 ++++----
 design_system_admin/modeles/dsfr_lien.css     | 143 ++++++++++++++++++
 design_system_admin/modeles/dsfr_lien.html    |  60 ++++----
 3 files changed, 200 insertions(+), 69 deletions(-)
 create mode 100644 design_system_admin/modeles/dsfr_lien.css

diff --git a/design_system_admin/modeles/dsfr_encadre.html b/design_system_admin/modeles/dsfr_encadre.html
index 51013b8..6dbdc2a 100644
--- a/design_system_admin/modeles/dsfr_encadre.html
+++ b/design_system_admin/modeles/dsfr_encadre.html
@@ -1,6 +1,26 @@
-<BOUCLE_theme2(MOTS){id_article}{id_groupe=14}>
-	#SET{numero_theme, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
-</BOUCLE_theme2>
+
+
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
+
+
 
 [(#ENV{icone}|=={ajouter}|oui) #SET{mon-icone, ' fr-icon-file-add-fill'} ]
 [(#ENV{icone}|=={ampoule}|oui) #SET{mon-icone, ' fr-icon-lightbulb-fill'} ]
@@ -141,41 +161,17 @@
 [(#ENV{icone}|=={zoom-out2}|oui) #SET{mon-icone, ' fr-icon-zoom-out-line'} ]
 [(#ENV{icone}|=={zoom2}|oui) #SET{mon-icone, ' fr-icon-zoom-in-line'} ]
 
-[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
-[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
-[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
-[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
-[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
-[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
-[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
-[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
-[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
-[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
-[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
-[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
-[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
-[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
-[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
-[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
-[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
-[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
-[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
-[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-card--grey'} ]
 
 
-[(#ENV{fin}|non)
-<div class="fr-callout  
-[(#ENV{icone}|oui) fr-fi-information-line]
-[(#ENV{icone-dsfr}|oui) #ENV{icone-dsfr}]
-[(#REM) choix des couleurs] 
 
-[(#REM) gestion des icones ]
-#GET{mon-icone}
-	
-[(#REM) couleurs pour la compatibilité avec les anciens contenus ]
-[(#GET{ma_couleur})]
-	
-"> 
+
+
+<BOUCLE_theme2(MOTS){id_article}{id_groupe=14}>
+	#SET{numero_theme, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+</BOUCLE_theme2>
+
+[(#ENV{fin}|non)
+<div class="fr-callout  [(#ENV{icone}|oui) fr-fi-information-line][(#ENV{icone-dsfr}|oui) #ENV{icone-dsfr}][(#GET{mon-icone})][(#GET{ma_couleur})]"> 
 	[<p class="fr-alert__title">(#ENV*{titre}|propre|paragrapher)</p>]
 	[<p>(#ENV*{texte}|paragrapher|propre)</p>]
 	[<a href="(#ENV*{url})" class="fr-btn">#ENV*{bouton}</a>]
diff --git a/design_system_admin/modeles/dsfr_lien.css b/design_system_admin/modeles/dsfr_lien.css
new file mode 100644
index 0000000..c99e6c5
--- /dev/null
+++ b/design_system_admin/modeles/dsfr_lien.css
@@ -0,0 +1,143 @@
+.fr-card__content {
+    box-shadow: none !important;
+  }
+
+.fr-background-alt--grey {
+    --idle: transparent;
+    --hover: var(--background-alt-grey-hover)!important;
+    --active: var(--background-alt-grey-active)!important;
+    background-color: var(--background-alt-grey)!important
+}
+
+.fr-background-alt--blue-france {
+    --idle: transparent;
+    --hover: var(--background-alt-blue-france-hover)!important;
+    --active: var(--background-alt-blue-france-active)!important;
+    background-color: var(--background-alt-blue-france)!important
+}
+
+.fr-background-alt--red-marianne {
+    --idle: transparent;
+    --hover: var(--background-alt-red-marianne-hover)!important;
+    --active: var(--background-alt-red-marianne-active)!important;
+    background-color: var(--background-alt-red-marianne)!important
+}
+
+.fr-background-alt--green-tilleul-verveine {
+    --idle: transparent;
+    --hover: var(--background-alt-green-tilleul-verveine-hover)!important;
+    --active: var(--background-alt-green-tilleul-verveine-active)!important;
+    background-color: var(--background-alt-green-tilleul-verveine)!important
+}
+
+.fr-background-alt--green-bourgeon {
+    --idle: transparent;
+    --hover: var(--background-alt-green-bourgeon-hover)!important;
+    --active: var(--background-alt-green-bourgeon-active)!important;
+    background-color: var(--background-alt-green-bourgeon)!important
+}
+
+.fr-background-alt--green-emeraude {
+    --idle: transparent;
+    --hover: var(--background-alt-green-emeraude-hover)!important;
+    --active: var(--background-alt-green-emeraude-active)!important;
+    background-color: var(--background-alt-green-emeraude)!important
+}
+
+.fr-background-alt--green-menthe {
+    --idle: transparent;
+    --hover: var(--background-alt-green-menthe-hover)!important;
+    --active: var(--background-alt-green-menthe-active)!important;
+    background-color: var(--background-alt-green-menthe)!important
+}
+
+.fr-background-alt--green-archipel {
+    --idle: transparent;
+    --hover: var(--background-alt-green-archipel-hover)!important;
+    --active: var(--background-alt-green-archipel-active)!important;
+    background-color: var(--background-alt-green-archipel)!important
+}
+
+.fr-background-alt--blue-ecume {
+    --idle: transparent;
+    --hover: var(--background-alt-blue-ecume-hover)!important;
+    --active: var(--background-alt-blue-ecume-active)!important;
+    background-color: var(--background-alt-blue-ecume)!important
+}
+
+.fr-background-alt--blue-cumulus {
+    --idle: transparent;
+    --hover: var(--background-alt-blue-cumulus-hover)!important;
+    --active: var(--background-alt-blue-cumulus-active)!important;
+    background-color: var(--background-alt-blue-cumulus)!important
+}
+
+.fr-background-alt--purple-glycine {
+    --idle: transparent;
+    --hover: var(--background-alt-purple-glycine-hover)!important;
+    --active: var(--background-alt-purple-glycine-active)!important;
+    background-color: var(--background-alt-purple-glycine)!important
+}
+
+.fr-background-alt--pink-macaron {
+    --idle: transparent;
+    --hover: var(--background-alt-pink-macaron-hover)!important;
+    --active: var(--background-alt-pink-macaron-active)!important;
+    background-color: var(--background-alt-pink-macaron)!important
+}
+
+.fr-background-alt--pink-tuile {
+    --idle: transparent;
+    --hover: var(--background-alt-pink-tuile-hover)!important;
+    --active: var(--background-alt-pink-tuile-active)!important;
+    background-color: var(--background-alt-pink-tuile)!important
+}
+
+.fr-background-alt--yellow-tournesol {
+    --idle: transparent;
+    --hover: var(--background-alt-yellow-tournesol-hover)!important;
+    --active: var(--background-alt-yellow-tournesol-active)!important;
+    background-color: var(--background-alt-yellow-tournesol)!important;
+}
+
+.fr-background-alt--yellow-moutarde {
+    --idle: transparent;
+    --hover: var(--background-alt-yellow-moutarde-hover)!important;
+    --active: var(--background-alt-yellow-moutarde-active)!important;
+    background-color: var(--background-alt-yellow-moutarde)!important
+}
+
+.fr-background-alt--orange-terre-battue {
+    --idle: transparent;
+    --hover: var(--background-alt-orange-terre-battue-hover)!important;
+    --active: var(--background-alt-orange-terre-battue-active)!important;
+    background-color: var(--background-alt-orange-terre-battue)!important
+}
+
+.fr-background-alt--brown-cafe-creme {
+    --idle: transparent;
+    --hover: var(--background-alt-brown-cafe-creme-hover)!important;
+    --active: var(--background-alt-brown-cafe-creme-active)!important;
+    background-color: var(--background-alt-brown-cafe-creme)!important
+}
+
+.fr-background-alt--brown-caramel {
+    --idle: transparent;
+    --hover: var(--background-alt-brown-caramel-hover)!important;
+    --active: var(--background-alt-brown-caramel-active)!important;
+    background-color: var(--background-alt-brown-caramel)!important
+}
+
+.fr-background-alt--brown-opera {
+    --idle: transparent;
+    --hover: var(--background-alt-brown-opera-hover)!important;
+    --active: var(--background-alt-brown-opera-active)!important;
+    background-color: var(--background-alt-brown-opera)!important
+}
+
+.fr-background-alt--beige-gris-galet {
+    --idle: transparent;
+    --hover: var(--background-alt-beige-gris-galet-hover)!important;
+    --active: var(--background-alt-beige-gris-galet-active)!important;
+    background-color: var(--background-alt-beige-gris-galet)!important
+}
\ No newline at end of file
diff --git a/design_system_admin/modeles/dsfr_lien.html b/design_system_admin/modeles/dsfr_lien.html
index 25c2a6f..6e63ee8 100644
--- a/design_system_admin/modeles/dsfr_lien.html
+++ b/design_system_admin/modeles/dsfr_lien.html
@@ -1,11 +1,32 @@
-[(#REM)
-Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants
-]
+[(#REM)Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants]
+
+[(#REM) ajout de la feuille CSS du modele ]
+<link rel="stylesheet" type="text/css" href="#CHEMIN{modeles/dsfr_lien.css}" 4 />
+
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-background-alt--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-background-alt--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-background-alt--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-background-alt--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-background-alt--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-background-alt--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-background-alt--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-background-alt--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-background-alt--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-background-alt--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-background-alt--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-background-alt--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-background-alt--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-background-alt--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-background-alt--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-background-alt--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-background-alt--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-background-alt--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-background-alt--beige-gris-galet'} ]
+[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-background-alt--grey'} ]
+ 
 
 [(#REM) gestion d'une div de debut et de fin ]
-
 [(#ENV{debut}|oui)<div class="fr-grid-row [(#ENV{marge}|oui) fr-grid-row--gutters ] fr-mb-3w">]
-
 [(#ENV{fin}|oui)</div>]
 
 [(#REM) gestion des icones ]
@@ -153,35 +174,6 @@ Gestion des liens d'article, de rubriques d'url et de doc avec les modeles corre
 
 [(#ENV{icone-dsfr}|oui) #SET{mon-icone, #ENV{icone-dsfr}}]
 
-[(#REM) gestion des couleurs ] 
-[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
-[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
-[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
-[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
-[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
-[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
-[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
-[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
-[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
-[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
-[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
-[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
-[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
-[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
-[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
-[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
-[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
-[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
-[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
-[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-card--grey'} ]
-
-[(#REM) correction du style pour les couleurs ]
-<style>
-.fr-card__content {
-  box-shadow: none !important;
-}
-</style>
-
 [(#REM) gestion des couleurs de badge ]
 [(#ENV{couleur_badge}|=={jaune}|oui) #SET{moncouleurbadge, 'fr-badge--new'} ]
 [(#ENV{couleur_badge}|=={marron}|oui) #SET{moncouleurbadge, 'fr-badge--warning'} ]
-- 
GitLab