From 466261a056be06729657f63f5a7adab20b98dad9 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Thu, 18 Mar 2021 12:59:48 -0400
Subject: [PATCH] feat: separate link color from primary color

---
 resources/skins.citizen.styles/common/common.less  | 12 ++++++------
 .../skins.citizen.styles/common/rootvariables.less | 14 ++++++++++++++
 resources/variables.less                           | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
index 6d9594a6..ee3ecdb2 100644
--- a/resources/skins.citizen.styles/common/common.less
+++ b/resources/skins.citizen.styles/common/common.less
@@ -126,7 +126,7 @@ td {
 }
 
 a {
-	color: var( --color-primary );
+	color: var( --color-link );
 	text-decoration: none !important;
 
 	&:not( [ href ] ) {
@@ -135,22 +135,22 @@ a {
 	}
 
 	&:hover {
-		color: var( --color-primary--hover );
+		color: var( --color-link--hover );
 	}
 
 	&:active {
-		color: var( --color-primary--active );
+		color: var( --color-link--active );
 	}
 
 	&.new {
-		color: var( --color-destructive ) !important; // Override visited
+		color: var( --color-link-new ) !important; // Override visited
 
 		&:hover {
-			color: var( --color-destructive--hover ) !important;
+			color: var( --color-link-new--hover ) !important;
 		}
 
 		&:active {
-			color: var( --color-destructive--active ) !important;
+			color: var( --color-link-new--active ) !important;
 		}
 	}
 
diff --git a/resources/skins.citizen.styles/common/rootvariables.less b/resources/skins.citizen.styles/common/rootvariables.less
index e48813cb..c06fbe24 100644
--- a/resources/skins.citizen.styles/common/rootvariables.less
+++ b/resources/skins.citizen.styles/common/rootvariables.less
@@ -56,6 +56,13 @@
 	--color-warning: @color-warning;
 	--color-success: @color-success;
 
+	--color-link: @color-link;
+	--color-link--hover: @color-link--hover;
+	--color-link--active: @color-link--active;
+	--color-link-new: @color-link-new;
+	--color-link-new--hover: @color-link-new--hover;
+	--color-link-new--active: @color-link-new--active;
+
 	/* Opacity */
 	--opacity-base--disabled: @opacity-base--disabled;
 	--opacity-icon-base: @opacity-icon-base;
@@ -132,6 +139,13 @@ html {
 	--color-base--emphasized: @dark-color-base--emphasized;
 	--color-base--subtle: @dark-color-base--subtle;
 
+	--color-link: @dark-color-link;
+	--color-link--hover: @dark-color-link--hover;
+	--color-link--active: @dark-color-link--active;
+	--color-link-new: @dark-color-link-new;
+	--color-link-new--hover: @dark-color-link-new--hover;
+	--color-link-new--active: @dark-color-link-new--active;
+
 	/* Opacity */
 	--opacity-icon-base--active: @dark-opacity-icon-base--active;
 
diff --git a/resources/variables.less b/resources/variables.less
index 015d80a0..3da2ef4a 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -122,6 +122,13 @@
 @color-warning:				@color-yellow50;
 @color-success:				@color-green50;
 
+@color-link:				@color-accent50;
+@color-link--hover:			@color-accent50--lighten;
+@color-link--active:		@color-accent30;
+@color-link-new:			@color-red50;
+@color-link-new--hover:		@color-red50--lighten;
+@color-link-new--active:	@color-red30;
+
 /* Opacity */
 @opacity-base--disabled:	0.2;
 @opacity-icon-base:			0.4;
@@ -205,6 +212,13 @@
 @dark-color-base--emphasized:	rgba( 255, 255, 255, 0.87 );
 @dark-color-base--subtle:		rgba( 255, 255, 255, 0.38 );
 
+@dark-color-link:				@color-accent50--lighten;
+@dark-color-link--hover:		@color-accent90;
+@dark-color-link--active:		@color-accent30;
+@dark-color-link-new:			@color-red50--lighten;
+@dark-color-link-new--hover:	@color-red90;
+@dark-color-link-new--active:	@color-red30;
+
 /* Opacity */
 // @dark-opacity-icon-base:			0.4;
 // @dark-opacity-icon-base--hover:		0.6;