From c9461fba4001280810142cdc203ed26af39e0ec6 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 16 Mar 2023 17:44:26 +0100
Subject: [PATCH] thonon-aggloreration-online: customize $primary-color via
 hobo var (#75528)

---
 static/thonon-agglomeration-online/_custom.scss | 17 ++++++++++-------
 static/thonon-agglomeration-online/_vars.scss   |  8 ++++----
 .../thonon-agglomeration-online/theme.html      |  6 ++++++
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/static/thonon-agglomeration-online/_custom.scss b/static/thonon-agglomeration-online/_custom.scss
index 1a359e33..03dc4a05 100644
--- a/static/thonon-agglomeration-online/_custom.scss
+++ b/static/thonon-agglomeration-online/_custom.scss
@@ -1,6 +1,9 @@
 .color-cyan {
 	color: $cyan;
 }
+.color-primary {
+	color: $primary-color;
+}
 
 .list-nude {
 	margin: 0;
@@ -49,7 +52,7 @@
 	&::after {
 		content: "→";
 		color: white;
-		background-color: $cyan;
+		background-color: $primary-color;
 		padding: 10px;
 		font-weight: bold;
 		margin-left: 1em;
@@ -140,7 +143,7 @@ label {
 			color: white;
 			padding: .66em 1em;
 			&:hover {
-				background-color: $cyan;
+				background-color: $primary-color;
 				text-decoration: none;
 			}
 		}
@@ -362,7 +365,7 @@ div.search-cell {
 			width: 3em;
 			height: 3em;
 			&:hover {
-				background-color: $cyan;
+				background-color: $primary-color;
 				color: white;
 			}
 		}
@@ -424,7 +427,7 @@ div.search-cell {
 		&--link {
 			font-size: $fz-2;
 			&:hover {
-				background-color: $cyan;
+				background-color: $primary-color;
 			}
 		}
 	}
@@ -447,7 +450,7 @@ div.menu-cell ul {
 			margin-right: .33em;
 		}
 		&:hover {
-			color: $cyan;
+			color: $primary-color;
 			background-color: transparent;
 		}
 	}
@@ -482,7 +485,7 @@ div.menu-cell ul {
 		text-decoration: none;
 
 		.tile--title {
-			color: $cyan;
+			color: $primary-color;
 		}
 	}
 }
@@ -642,7 +645,7 @@ div.menu-cell ul {
 	line-height: 1.4;
 }
 .actu--insert {
-	border-left: .33em solid $cyan;
+	border-left: .33em solid $primary-color;
 	padding: .66em;
 	background-color: hsla(0, 0%, 0%, 0.05);
 }
diff --git a/static/thonon-agglomeration-online/_vars.scss b/static/thonon-agglomeration-online/_vars.scss
index ec383280..4d502534 100644
--- a/static/thonon-agglomeration-online/_vars.scss
+++ b/static/thonon-agglomeration-online/_vars.scss
@@ -22,6 +22,7 @@ $mobile-header-height: 75px;
 // $desktop-header-height: ;
 
 // Core vars
+$primary-color: var(--tao-primary-color, #{$cyan});
 $width: 1400em / $base-font;
 $mobile-limit: 64em;
 $very-small-limit: 35em;
@@ -35,9 +36,8 @@ $columns-gutter: 2rem;
 $font-family: Poppins, sans-serif;
 $font-size: $base-font / 16 * 100%;
 $font-color: $gray-dark;
-$link-color: $cyan;
+$link-color: $primary-color;
 
-$primary-color: $cyan;
 $body-background: $gray-xlight;
 
 $header-background-color: white;
@@ -72,11 +72,11 @@ $cell-border: none;
 $cell-title-cover-border: false;
 $cell-entry-border: 1px solid $body-background;
 $cell-entry-hover-color: white;
-$cell-entry-hover-background: $cyan;
+$cell-entry-hover-background: $primary-color;
 $cell-border-radius: 1rem;
 
 $button-background: white;
-$button-hover-background: $cyan;
+$button-hover-background: $primary-color;
 $button-color: $font-color;
 $button-hover-color: white;
 $button-border-radius: $cell-border-radius;
diff --git a/templates/variants/thonon-agglomeration-online/theme.html b/templates/variants/thonon-agglomeration-online/theme.html
index 7e3595eb..474b8691 100644
--- a/templates/variants/thonon-agglomeration-online/theme.html
+++ b/templates/variants/thonon-agglomeration-online/theme.html
@@ -4,6 +4,12 @@
 {# map menu icons #}
 {% block extra_css %}
   <style>
+    html {
+    {% if tao_primary_color %}
+      --tao-primary-color: {{ tao_primary_color }};
+    {% endif %}
+    }
+
     {% if menu_icons %}
       {% for icon, slug in menu_icons.items %}
         div.gru-nav > ul > li.menu-{{ slug }} > a {
-- 
2.39.2