Merge pull request #3576 from alphagov/remove-compat-mode-legacy-colours

Remove legacy colour palette

src/govuk/components/accordion/_index.scss

@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/accordion") {
   $govuk-accordion-base-colour: govuk-colour("black");
-  $govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-accordion-hover-colour: govuk-colour("light-grey");
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 

src/govuk/components/button/_index.scss

@@ -7,7 +7,7 @@
 /// @type Colour
 /// @access public
 
-$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
+$govuk-button-background-colour: govuk-colour("green") !default;
 
 /// Button component text colour
 ///
@@ -23,7 +23,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-secondary-button-colour: govuk-colour("light-grey");
   $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);

src/govuk/components/cookie-banner/_index.scss

@@ -12,7 +12,7 @@
     // when user changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: govuk-colour("light-grey");
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

src/govuk/components/footer/_index.scss

@@ -2,18 +2,7 @@
 
   $govuk-footer-background: $govuk-canvas-background-colour;
   $govuk-footer-border: $govuk-border-colour;
-  // This variable can be removed entirely once the legacy palette goes away,
-  // as it'll just be the same as $govuk-footer-border.
-  $govuk-footer-border-top: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
-
-  @if $govuk-use-legacy-palette {
-    $govuk-footer-border-top: #a1acb2;
-    $govuk-footer-border: govuk-colour("grey-2");
-    $govuk-footer-text: #454a4c;
-    $govuk-footer-link-hover-colour: #171819;
-  }
 
   // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
@@ -27,27 +16,14 @@
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border-top;
+    border-top: 1px solid $govuk-footer-border;
     color: $govuk-footer-text;
     background: $govuk-footer-background;
   }
 
   .govuk-footer__link {
     @include govuk-link-common;
-
-    @if $govuk-use-legacy-palette {
-      &:link,
-      &:visited {
-        color: $govuk-footer-text;
-      }
-
-      &:hover,
-      &:active {
-        color: $govuk-footer-link-hover-colour;
-      }
-    } @else {
-      @include govuk-link-style-text;
-    }
+    @include govuk-link-style-text;
 
     // alphagov/govuk_template includes a specific a:link:focus selector
     // designed to make unvisited links a slightly darker blue when focussed, so

src/govuk/components/input/_index.scss

@@ -125,7 +125,7 @@
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: govuk-colour("light-grey");
 
     text-align: center;
     @include govuk-media-query($until: tablet) {

src/govuk/components/pagination/_index.scss

@@ -32,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links
 
     &:hover {
-      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+      background-color: govuk-colour("light-grey");
     }
   }
 

src/govuk/components/panel/_index.scss

@@ -30,7 +30,7 @@
 
   .govuk-panel--confirmation {
     color: govuk-colour("white");
-    background: govuk-colour("green", $legacy: "turquoise");
+    background: govuk-colour("green");
 
     @include govuk-media-query($media-type: print) {
       border-color: currentcolor;

src/govuk/components/summary-list/_index.scss

@@ -172,7 +172,7 @@
 
     // Ensures the card header appears separate to the summary list in forced colours mode
     border-bottom: 1px solid transparent;
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: govuk-colour("light-grey");
 
     @include govuk-media-query($from: "tablet") {
       display: flex;

src/govuk/components/tabs/_index.scss

@@ -64,7 +64,7 @@
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
-        background-color: govuk-colour("light-grey", $legacy: "grey-4");
+        background-color: govuk-colour("light-grey");
         text-align: center;
 
         &::before {

src/govuk/components/tag/_index.scss

@@ -24,8 +24,8 @@
   }
 
   .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30%);
-    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90%);
+    color: govuk-shade(govuk-colour("dark-grey"), 30%);
+    background: govuk-tint(govuk-colour("dark-grey"), 90%);
   }
 
   .govuk-tag--purple {

src/govuk/helpers/_colour.scss

@@ -1,6 +1,7 @@
 @import "../settings/compatibility";
 @import "../settings/colours-palette";
 @import "../settings/colours-organisations";
+@import "../settings/warnings";
 
 ////
 /// @group helpers/colour
@@ -10,30 +11,22 @@
 ///
 /// @param {String | Colour} $colour - Name of colour from the colour palette
 ///   (`$govuk-colours`)
-/// @param {String} $legacy - Either the name of colour from the legacy palette
-///   or a colour literal, to return instead when in 'legacy mode' - matching
-///   the palette from GOV.UK Template, Elements or Frontend Toolkit
+/// @param {String | Colour | Boolean} $legacy [false] - Deprecated.
+///   The `$legacy` parameter is deprecated and is non-operational, as the
+///   legacy colour palette has been removed. The parameter will be removed in
+///   the next major version.
 /// @return {Colour} Representation of named colour
 ///
-/// @example scss - Using legacy colours from the palette
-///  .foo {
-///    background-colour: govuk-colour("mid-grey", $legacy: "grey-2");
-///  }
-///
-/// @example scss - Using legacy colour literals
-///  .foo {
-///    background-colour: govuk-colour("green", $legacy: #BADA55);
-///  }
-///
 /// @throw if `$colour` is not a colour from the colour palette
 /// @access public
 
 @function govuk-colour($colour, $legacy: false) {
-  @if $govuk-use-legacy-palette and $legacy {
-    @if type-of($legacy) == "color" {
-      @return $legacy;
-    }
-    $colour: $legacy;
+  // Output a warning if $legacy is set to anything. This can't use the
+  // `_warning` mixin due to being a function, so we handle it manually.
+  @if $legacy and not index($govuk-suppressed-warnings, "legacy-colour-param") {
+    @warn "The `$legacy` parameter is deprecated and is non-operational. It " +
+      "will be removed in the next major version. To silence this warning, " +
+      "update $govuk-suppressed-warnings with key: \"legacy-palette\"";
   }
 
   @if type-of($colour) == "color" {

src/govuk/helpers/colour.test.js

@@ -84,189 +84,25 @@ describe('@function govuk-colour', () => {
       )
   })
 
-  describe('when $govuk-use-legacy-palette is true', () => {
-    beforeEach(() => {
-      sassBootstrap = `
-        @import "settings/warnings";
-        $govuk-use-legacy-palette: true;
-        ${sassBootstrap}
-      `
-    })
-
-    it('returns the legacy colour if specified', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('red', $legacy: 'blue');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #0000ff;
-            }
-          `
-        })
-    })
-
-    it('returns the legacy literal if specified', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('red', $legacy: #BADA55);
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #BADA55;
-            }
-          `
-        })
-    })
-
-    it('does not error if the non-legacy colour does not exist', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('hooloovoo', $legacy: 'blue');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #0000ff;
-            }
-          `
-        })
-    })
-
-    it('throws an error if the legacy colour does not exist', async () => {
-      const sass = `
-        ${sassBootstrap}
-        .foo {
-          color: govuk-colour('red', $legacy: 'hooloovoo');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .rejects
-        .toThrow(
-          'Unknown colour `hooloovoo`'
-        )
-    })
-
-    it('outputs a deprecation warning when set to true', async () => {
-      const sass = `${sassBootstrap}`
-
-      await compileSassString(sass, sassConfig)
-
-      // Expect our mocked @warn function to have been called once with a single
-      // argument, which should be the deprecation notice
-      expect(mockWarnFunction.mock.calls[0])
-        .toEqual(expect.arrayContaining([
-          '$govuk-use-legacy-palette is deprecated. Only the modern colour ' +
-            'palette will be supported from v5.0. To silence this warning, ' +
-            'update $govuk-suppressed-warnings with key: "legacy-palette"'
-        ]))
-    })
-  })
+  it('throws a deprecation warning if the $legacy parameter is used', async () => {
+    const sass = `
+      ${sassBootstrap}
+
+      .foo {
+        color: govuk-colour('red', $legacy: 'blue');
+      }
+    `
+
+    await compileSassString(sass, sassConfig)
 
-  describe('when $govuk-use-legacy-palette is false', () => {
-    beforeEach(() => {
-      sassBootstrap = `
-        $govuk-use-legacy-palette: false;
-        ${sassBootstrap}
-      `
-    })
-
-    it('does not return the legacy colour', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('red', $legacy: 'blue');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #ff0000;
-            }
-          `
-        })
-    })
-
-    it('does not returns the legacy literal when specified', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('red', $legacy: #BADA55);
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #ff0000;
-            }
-          `
-        })
-    })
-
-    it('throws an error if the non-legacy colour does not exist', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('hooloovoo', $legacy: 'blue');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .rejects
-        .toThrow(
-          'Unknown colour `hooloovoo`'
-        )
-    })
-
-    it('does not error if the legacy colour does not exist', async () => {
-      const sass = `
-        ${sassBootstrap}
-
-        .foo {
-          color: govuk-colour('red', $legacy: 'hooloovoo');
-        }
-      `
-
-      await expect(compileSassString(sass, sassConfig))
-        .resolves
-        .toMatchObject({
-          css: outdent`
-            .foo {
-              color: #ff0000;
-            }
-          `
-        })
-    })
+    // Expect our mocked @warn function to have been called once with a single
+    // argument, which should be the deprecation notice
+    expect(mockWarnFunction.mock.calls[0])
+      .toEqual(expect.arrayContaining([
+        'The `$legacy` parameter is deprecated and is non-operational. It ' +
+        'will be removed in the next major version. To silence this warning, ' +
+        'update $govuk-suppressed-warnings with key: "legacy-palette"'
+      ]))
   })
 })