From 4ae5cb745c982243947d971dc364b761ee5076ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 30 Nov 2022 14:16:30 +0100
Subject: [PATCH] misc: declare css variables for main colours (#.....)

---
 gadjo/static/css/_forms.scss | 14 +++++------
 gadjo/static/css/gadjo.scss  | 47 ++++++++++++++++++++++++++++++------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index 9ff4ce7..ad1ca23 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -11,7 +11,7 @@ $widget-focus-outline: 1px solid $primary-color;
 $widget-focus-outline-offset: 0;
 
 $button-color: $primary-color;
-$button-cancel-color: darken(grayscale($button-color), 10%);
+$button-cancel-color: var(--inert-gray);
 $button-delete-color: #CD2026;
 $button-submit-color: #215D9C;
 $button-focus-outline: $widget-focus-outline !default;
@@ -106,9 +106,9 @@ a.button {
 	&[aria-pressed=true], &:hover {
 		background: $button-color;
 		color: white;
-		border-color: darken($button-color, 20%);
+		border-color: $darker-primary-color20;
 	}
-	&:active { border-color: darken($button-color, 10%); }
+	&:active { border-color: $darker-primary-color10; }
 	&:focus {
 		@if $button-focus-outline == none {
 			outline: 1px dotted $button-background;
@@ -143,11 +143,11 @@ a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.but
 	&:hover {
 		background: #eee;
 		color: $button-cancel-color;
-		border-color: darken($button-cancel-color, 20%);
+		border-color: var(--inert-gray30);
 	}
-	&:active { border-color: darken($button-cancel-color, 10%); }
+	&:active { border-color: var(--inert-gray20); }
 	&:focus {
-		outline-color: darken($button-cancel-color, 10%);
+		outline-color: var(--inert-gray20);
 	}
 }
 
@@ -250,7 +250,7 @@ input[type="radio"]:focus, input[type="checkbox"]:focus {
 
 label input[type="radio"], label input[type="checkbox"] {
 	&[disabled] + span {
-		color: lighten($font-color, 30%);
+		color: $inert-gray;
 	}
 }
 
diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss
index d9f7348..047379c 100644
--- a/gadjo/static/css/gadjo.scss
+++ b/gadjo/static/css/gadjo.scss
@@ -3,7 +3,7 @@
 @import 'opensans';
 @import 'utils';
 
-$font-color: #3c3c33;
+$font-color: var(--font-color);
 $mobile-limit: 760px;
 $font-family: "Open Sans", sans-serif;
 $sidepage-background: white;
@@ -15,8 +15,18 @@ $sidepage-border-width: 4px;
 
 $cell-border-radius: 3px;
 
+$primary-color: var(--primary-color);
+$secondary-color: var(--secondary-color);
+$darker-primary-color: var(--darker-primary-color30);
+$darker-primary-color20: var(--darker-primary-color20);
+$darker-primary-color10: var(--darker-primary-color10);
+$lighter-primary-color: var(--lighter-primary-color20);
+$link-color: var(--link-color);
+$inert-gray: var(--inert-gray);
+
 // blue
-$primary-color: #386ede; $secondary-color: #00d6eb;
+$blue: #386ede;
+$cyan: #00d6eb;
 
 // red/orange
 //$primary-color: #ff375e; $secondary-color: #ff5a47;
@@ -24,7 +34,31 @@ $primary-color: #386ede; $secondary-color: #00d6eb;
 // purple
 //$primary-color: #6f2b92; $secondary-color: #e72588;
 
-$link-color: $primary-color;
+
+
+/* CSS variables */
+
+$_primary_color: $blue;
+$_secondary_color: $cyan;
+
+html {
+	--primary-color: #{$_primary_color};
+	--secondary-color: #{$_secondary_color};
+	--darker-primary-color30: #{darken($_primary_color, 30%)};
+	--darker-primary-color20: #{darken($_primary_color, 20%)};
+	--darker-primary-color10: #{darken($_primary_color, 10%)};
+	--lighter-primary-color30: #{lighten($_primary_color, 30%)};
+	--lighter-primary-color20: #{lighten($_primary_color, 20%)};
+	--lighter-primary-color10: #{lighten($_primary_color, 10%)};
+	--inert-gray: darken(grayscale($_primary_color), 10%);
+	--inert-gray20: darken(grayscale($_primary_color), 20%);
+	--inert-gray30: darken(grayscale($_primary_color), 30%);
+	--font-color: #3c3c33;
+	--font-color-light: #666;
+	--link-color: #{$_primary_color};
+	--background: #ecf0f3;
+	--white: white;
+}
 
 /* generalities */
 
@@ -42,7 +76,6 @@ html, body {
 		font-size: 14px;
 	}
 	color: $font-color;
-	background: #ecf0f3;
 	background: linear-gradient(#ecf0f3, white);
 }
 
@@ -1003,7 +1036,7 @@ ul#sidepage-menu li a {
 
 #sidepage ul#sidepage-menu li:hover a,
 #sidepage ul#sidepage-menu .active a {
-	color: darken($primary-color, 30%);
+	color: $darker-primary-color;
 	filter: none;
 }
 
@@ -1076,7 +1109,7 @@ ul#sidepage-menu li a {
 	border-radius: 2px;
 }
 
-$string-color: str-slice($primary-color + '', 2);
+$string-color: str-slice($blue + '', 2);
 
 $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories, clock, counter, data, facturier, forms, gis, grid, home, identity-management, lingo, mail, management, organizational-units, passerelle, password, phone, portal, portal-agent, porte-doc, roles, security, services, settings, statistics, studio, submission, system, texts, theme, users, workflows;
 
@@ -1181,7 +1214,7 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
 				padding: 5px 10px;
 				border: 0;
 				&:hover {
-					background: lighten($primary-color, 20%);
+					background: $lighter-primary-color;
 				}
 			}
 		}
-- 
2.38.1

