Skip to content

Commit

Permalink
Add success and error colour var and link mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
Vanita Barrett authored and hannalaakso committed Oct 22, 2020
1 parent 5cafe72 commit 2abb78c
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 0 deletions.
100 changes: 100 additions & 0 deletions src/govuk/helpers/_links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,106 @@
}
}

/// Error link style mixin
///
/// Provides the error unvisited, visited, hover and active states for links.
///
/// If you use this mixin in a component you must also include the
/// govuk-link-common mixin in order to get the focus state.
///
/// @example scss
/// .govuk-component__link {
/// @include govuk-link-common;
/// @include govuk-link-style-error;
/// }
///
/// @access public

@mixin govuk-link-style-error {
&:link {
color: $govuk-error-colour;
}

&:visited {
color: $govuk-link-visited-colour;
}

&:hover {
color: scale-color($govuk-error-colour, $lightness: -30%);
}

&:active {
color: $govuk-error-colour;
}

// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
}

// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited link s a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-focus-text-colour;
}
}
}

/// Success link style mixin
///
/// Provides the success unvisited, visited, hover and active states for links.
///
/// If you use this mixin in a component you must also include the
/// govuk-link-common mixin in order to get the focus state.
///
/// @example scss
/// .govuk-component__link {
/// @include govuk-link-common;
/// @include govuk-link-style-success;
/// }
///
/// @access public

@mixin govuk-link-style-success {
&:link {
color: $govuk-success-colour;
}

&:visited {
color: $govuk-link-visited-colour;
}

&:hover {
color: scale-color($govuk-success-colour, $lightness: -30%);
}

&:active {
color: $govuk-success-colour;
}

// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
}

// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited link s a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-focus-text-colour;
}
}
}

/// Muted style link mixin
///
/// Used for secondary links on a page - the link will appear in muted colours
Expand Down
9 changes: 9 additions & 0 deletions src/govuk/settings/_colours-applied.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,15 @@ $govuk-focus-text-colour: govuk-colour("black") !default;

$govuk-error-colour: govuk-colour("red") !default;

/// Success colour
///
/// Used to highlight success messages and banners
///
/// @type Colour
/// @access public

$govuk-success-colour: govuk-colour("green") !default;

/// Border colour
///
/// Used in for example borders, separators, rules and keylines.
Expand Down

0 comments on commit 2abb78c

Please sign in to comment.