Merge pull request #6444 from alphagov/rename-functional-colours

Rename applied colours to functional colours

Author: domoscargin

CHANGELOG.md

@@ -6,67 +6,55 @@ For advice on how to use these release notes, see [our guidance on staying up to
 
 ### Breaking changes
 
-#### Use the `govuk-applied-colour` function to access applied colours in Sass
+#### Use the `govuk-functional-colour` function to access functional (formerly applied) colours in Sass
 
-We've restructured our applied colours in Sass, changing how you can access applied colours for use in your own code.
+We've renamed and restructured our applied colours in Sass, and we've changed how you access them in your own code. They are now called functional colours.
 
-If you were using the value of one of the variables in [`settings/_colours-applied.scss`](https://github.com/alphagov/govuk-frontend/blob/v5.13.0/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss), use the new `govuk-applied-colour` function to output a [`var()` call](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var) referencing the colour.
+If you were using the value of one of the variables in [`settings/_colours-applied.scss`](https://github.com/alphagov/govuk-frontend/blob/v5.13.0/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss), use the new `govuk-functional-colour` function to output a [`var()` call](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var) referencing the colour.
 
 ```scss
 .a-component {
   // color: $govuk-text-colour
-  color: govuk-applied-colour(text);
+  color: govuk-functional-colour(text);
 }
 ```
 
-| Removed Sass variable               | `govuk-applied-colour` call                 |
-| ----------------------------------- | ------------------------------------------- |
-| `$govuk-brand-colour`               | `govuk-applied-colour(brand)`               |
-| `$govuk-text-colour`                | `govuk-applied-colour(text)`                |
-| `$govuk-template-background-colour` | `govuk-applied-colour(template-background)` |
-| `$govuk-body-background-colour`     | `govuk-applied-colour(body-background)`     |
-| `$govuk-print-text-colour`          | `govuk-applied-colour(print-text)`          |
-| `$govuk-secondary-text-colour`      | `govuk-applied-colour(secondary-text)`      |
-| `$govuk-focus-colour`               | `govuk-applied-colour(focus)`               |
-| `$govuk-focus-text-colour`          | `govuk-applied-colour(focus-text)`          |
-| `$govuk-error-colour`               | `govuk-applied-colour(error)`               |
-| `$govuk-success-colour`             | `govuk-applied-colour(success)`             |
-| `$govuk-border-colour`              | `govuk-applied-colour(border)`              |
-| `$govuk-input-border-colour`        | `govuk-applied-colour(input-border)`        |
-| `$govuk-hover-colour`               | `govuk-applied-colour(hover)`               |
-| `$govuk-link-colour`                | `govuk-applied-colour(link)`                |
-| `$govuk-link-visited-colour`        | `govuk-applied-colour(link-visited)`        |
-| `$govuk-link-hover-colour`          | `govuk-applied-colour(link-hover)`          |
-| `$govuk-link-active-colour`         | `govuk-applied-colour(link-active)`         |
-
-#### Use `$govuk-applied-colours` to redefine applied colours
-
-We've restructured our applied colours in Sass, changing how you can redefine applied colours.
-
-If you were redefining a custom value for the applied colour before importing GOV.UK Frontend, you can still do this by assigning a map of the colours you want to change to the `$govuk-applied-colours` variable.
+| Removed Sass variable               | `govuk-functional-colour` call                 |
+| ----------------------------------- | ---------------------------------------------- |
+| `$govuk-brand-colour`               | `govuk-functional-colour(brand)`               |
+| `$govuk-text-colour`                | `govuk-functional-colour(text)`                |
+| `$govuk-template-background-colour` | `govuk-functional-colour(template-background)` |
+| `$govuk-body-background-colour`     | `govuk-functional-colour(body-background)`     |
+| `$govuk-print-text-colour`          | `govuk-functional-colour(print-text)`          |
+| `$govuk-secondary-text-colour`      | `govuk-functional-colour(secondary-text)`      |
+| `$govuk-focus-colour`               | `govuk-functional-colour(focus)`               |
+| `$govuk-focus-text-colour`          | `govuk-functional-colour(focus-text)`          |
+| `$govuk-error-colour`               | `govuk-functional-colour(error)`               |
+| `$govuk-success-colour`             | `govuk-functional-colour(success)`             |
+| `$govuk-border-colour`              | `govuk-functional-colour(border)`              |
+| `$govuk-input-border-colour`        | `govuk-functional-colour(input-border)`        |
+| `$govuk-hover-colour`               | `govuk-functional-colour(hover)`               |
+| `$govuk-link-colour`                | `govuk-functional-colour(link)`                |
+| `$govuk-link-visited-colour`        | `govuk-functional-colour(link-visited)`        |
+| `$govuk-link-hover-colour`          | `govuk-functional-colour(link-hover)`          |
+| `$govuk-link-active-colour`         | `govuk-functional-colour(link-active)`         |
+
+#### Use `$govuk-functional-colours` to redefine functional (formerly applied) colours
+
+We've restructured our applied colours in Sass. They are now called functional colours, and we've changed the way you redefine them.
+
+If you were redefining a custom value for the functional colour before importing GOV.UK Frontend, you can still do this by assigning a map of the colours you want to change to the `$govuk-functional-colours` variable.
 
 ```scss
-// This will be merged with the default applied colours of GOV.UK Frontend
+// This will be merged with the default functional colours of GOV.UK Frontend
 // redefining the 'brand' colour to `rebeccapurple`
-$govuk-applied-colour: (
+$govuk-functional-colour: (
   brand: rebeccapurple
 );
 @import 'pkg:govuk-frontend';
 ```
 
-This also works if you use `@use` to load GOV.UK Frontend:
-
-```scss
-// This will be merged with the default applied colours of GOV.UK Frontend
-// redefining the 'brand' colour to `rebeccapurple`
-@use 'pkg:govuk-frontend' with (
-  $govuk-applied-colour: (
-    brand: rebeccapurple
-  )
-);
-```
-
-Note that you can only redefine existing applied colours, not add new applied colours. This is to make sure there's a clear separation between colours from GOV.UK Frontend and colours from your own project.
+Note that you can only redefine existing functional colours, not add new functional colours. This is to make sure there's a clear separation between colours from GOV.UK Frontend and colours from your own project.
 
 #### We've ended support for Ruby Sass and LibSass
 

packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss

@@ -47,7 +47,7 @@
 .app-updates {
   margin-bottom: govuk-spacing(8);
   padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(2);
-  border: 1px solid govuk-applied-colour(border);
+  border: 1px solid govuk-functional-colour(border);
   background-color: govuk-colour("black", $variant: "tint-95");
 }
 

packages/govuk-frontend-review/src/stylesheets/full-page-examples/product-page.scss

@@ -2,7 +2,7 @@
 
 .app-masthead {
   display: flow-root;
-  background: govuk-applied-colour(brand);
+  background: govuk-functional-colour(brand);
 }
 
 .app-breadcrumbs__underline {

packages/govuk-frontend-review/src/stylesheets/full-page-examples/search.scss

@@ -4,7 +4,7 @@
 .app-document-list > li {
   padding-top: govuk-spacing(4);
   padding-bottom: govuk-spacing(2);
-  border-bottom: 1px solid govuk-applied-colour(border);
+  border-bottom: 1px solid govuk-functional-colour(border);
 }
 
 .app-metadata-list > li {
@@ -14,7 +14,7 @@
 
 .app-filter li {
   padding-bottom: govuk-spacing(4);
-  border-bottom: 1px solid govuk-applied-colour(border);
+  border-bottom: 1px solid govuk-functional-colour(border);
 }
 
 .app-open-fieldset {

packages/govuk-frontend-review/src/stylesheets/partials/_app.scss

@@ -1,5 +1,5 @@
 .app-template {
-  background-color: govuk-applied-colour(body-background);
+  background-color: govuk-functional-colour(body-background);
 }
 
 // Injected into the preview page, that is then put in an iframe

packages/govuk-frontend-review/src/stylesheets/partials/_code.scss

@@ -15,7 +15,7 @@
   @include govuk-responsive-margin(4, "bottom");
 
   &:focus {
-    border: $govuk-focus-width solid govuk-applied-colour(input-border);
-    outline: $govuk-focus-width solid govuk-applied-colour(focus);
+    border: $govuk-focus-width solid govuk-functional-colour(input-border);
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
   }
 }

packages/govuk-frontend/src/govuk/components/accordion/_index.scss

@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/accordion") {
   $govuk-accordion-base-colour: govuk-colour("black");
   $govuk-accordion-hover-colour: govuk-colour("black", $variant: "tint-95");
-  $govuk-accordion-icon-focus-colour: govuk-applied-colour(focus);
+  $govuk-accordion-icon-focus-colour: govuk-functional-colour(focus);
   $govuk-accordion-bottom-border-width: 1px;
 
   .govuk-accordion {
@@ -39,7 +39,7 @@
   .govuk-frontend-supported {
     .govuk-accordion {
       // Border at the bottom of the whole accordion
-      border-bottom: $govuk-accordion-bottom-border-width solid govuk-applied-colour(border);
+      border-bottom: $govuk-accordion-bottom-border-width solid govuk-functional-colour(border);
     }
 
     .govuk-accordion__section {
@@ -83,7 +83,7 @@
 
       border-width: 0;
 
-      color: govuk-applied-colour(link);
+      color: govuk-functional-colour(link);
       background: none;
 
       cursor: pointer;
@@ -188,14 +188,14 @@
 
       border: 0;
 
-      border-top: $govuk-accordion-bottom-border-width solid govuk-applied-colour(border);
+      border-top: $govuk-accordion-bottom-border-width solid govuk-functional-colour(border);
 
       // Visually separate the section from the one underneath when user changes
       // colours in their browser. See
       // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
-      color: govuk-applied-colour(text);
+      color: govuk-functional-colour(text);
       background: none;
 
       text-align: left;
@@ -208,7 +208,7 @@
       }
 
       &:active {
-        color: govuk-applied-colour(link-active);
+        color: govuk-functional-colour(link-active);
         background: none;
       }
 
@@ -298,7 +298,7 @@
     .govuk-accordion__section-toggle {
       @include govuk-font-size($size: 19);
       @include govuk-typography-weight-regular;
-      color: govuk-applied-colour(link);
+      color: govuk-functional-colour(link);
     }
 
     // Add space between the icon and text. Avoid applying spacing directly to
@@ -355,12 +355,12 @@
     // remove hover state as it can be stuck in that state (iOS).
     @media (hover: none) {
       .govuk-accordion__section-header:hover {
-        border-top-color: govuk-applied-colour(border);
+        border-top-color: govuk-functional-colour(border);
 
-        box-shadow: inset 0 3px 0 0 govuk-applied-colour(link);
+        box-shadow: inset 0 3px 0 0 govuk-functional-colour(link);
 
         .govuk-accordion__section-button {
-          border-top-color: govuk-applied-colour(border);
+          border-top-color: govuk-functional-colour(border);
         }
       }
     }

packages/govuk-frontend/src/govuk/components/back-link/_index.scss

@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: govuk-applied-colour(secondary-text);
+  $chevron-border-colour: govuk-functional-colour(secondary-text);
 
   .govuk-back-link {
     @include govuk-font-size($size: $font-size);
@@ -59,7 +59,7 @@
   }
 
   .govuk-back-link:focus::before {
-    border-color: govuk-applied-colour(focus-text);
+    border-color: govuk-functional-colour(focus-text);
   }
 
   .govuk-back-link::after {

packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss

@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: govuk-applied-colour(secondary-text);
+  $chevron-border-colour: govuk-functional-colour(secondary-text);
 
   // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
   // of length 8 (7px + 1px border):

packages/govuk-frontend/src/govuk/components/button/_index.scss

@@ -28,7 +28,7 @@ $govuk-inverse-button-background-colour: govuk-colour("white") !default;
 /// @type Colour
 /// @access public
 
-$govuk-inverse-button-text-colour: govuk-applied-colour(brand) !default;
+$govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
 
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
@@ -111,16 +111,16 @@ $govuk-inverse-button-text-colour: govuk-applied-colour(brand) !default;
     }
 
     &:focus {
-      border-color: govuk-applied-colour(focus);
+      border-color: govuk-functional-colour(focus);
       outline: $govuk-focus-width solid transparent;
-      box-shadow: inset 0 0 0 1px govuk-applied-colour(focus);
+      box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);
     }
 
     &:focus:not(:active):not(:hover) {
-      border-color: govuk-applied-colour(focus);
-      color: govuk-applied-colour(focus-text);
-      background-color: govuk-applied-colour(focus);
-      box-shadow: 0 2px 0 govuk-applied-colour(focus-text);
+      border-color: govuk-functional-colour(focus);
+      color: govuk-functional-colour(focus-text);
+      background-color: govuk-functional-colour(focus);
+      box-shadow: 0 2px 0 govuk-functional-colour(focus-text);
     }
 
     // Use a pseudo element to expand the click target area to include the