feat: separate link color from primary color

This commit is contained in:
alistair3149 2021-03-18 12:59:48 -04:00
parent aa42838abc
commit 466261a056
3 changed files with 34 additions and 6 deletions

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;