Make better use of variables in the theme

diff --git a/ui/semantic/galette/elements/segment.overrides b/ui/semantic/galette/elements/segment.overrides
index 997f225c9798fc155ec76c7ace56230daaeea3c2..2c7cbe2c007d070ba436c8304f11a77b78ce0ed2 100644 (file)
--- a/ui/semantic/galette/elements/segment.overrides
+++ b/ui/semantic/galette/elements/segment.overrides
@@ -7,7 +7,7 @@
 ------------------------------*/
 .ui.horizontal.segments.header {
   color: darken(@textColor, 15);
-  background: rgba(255, 182, 25, 0.7);
+  background: @galetteHeaderBackground;
   margin: 0;
 
   & > .segment {

diff --git a/ui/semantic/galette/globals/site.variables b/ui/semantic/galette/globals/site.variables
index 6e786e4ed8dabb535963996930cf0eedeabe6cee..60c41127aaefaeda16eaa7664c92f1b4f62bbb99 100644 (file)
--- a/ui/semantic/galette/globals/site.variables
+++ b/ui/semantic/galette/globals/site.variables
@@ -4,17 +4,18 @@
 
 @fontName                   : 'PT Sans';
 
-@galetteBackgroundImage     : 'themes/galette/assets/images/bg.png';
-@galetteBackgroundImageRtl  : 'themes/galette/assets/images/bg-rtl.png';
-@galetteNavBackground       : rgba(99, 107, 112, .3);
-@galetteColor               : #ffb619;
-@lightGaletteColor          : #ffda8b;
-
 @red                        : #d22828;
 @blue                       : #2f69b3;
 @green                      : #087d24;
 @grey                       : #636b70;
 
+@galetteColor               : #ffb619;
+@lightGaletteColor          : saturate(lighten(@galetteColor, 22), 15);
+@galetteHeaderBackground    : fade(@galetteColor, 70);
+@galetteNavBackground       : fade(@grey, 30);
+@galetteBackgroundImage     : 'themes/galette/assets/images/bg.png';
+@galetteBackgroundImageRtl  : 'themes/galette/assets/images/bg-rtl.png';
+
 @primaryColor               : @galetteColor;
 @secondaryColor             : @grey;