Add inverse styles

Author: domoscargin

packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss

@@ -32,4 +32,16 @@
     @include base.govuk-link-common;
     @include base.govuk-link-style-default;
   }
+
+  .govuk-language-switcher--inverse {
+    color: base.govuk-colour("white");
+
+    .govuk-language-switcher__link {
+      @include base.govuk-link-style-inverse;
+    }
+
+    .govuk-language-switcher__list-item {
+      border-right-color: base.govuk-colour("white");
+    }
+  }
 }

packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml

@@ -85,6 +85,20 @@ examples:
         - text: 中文
           lang: zh
           href: '#/zh'
+  - name: inverse
+    screenshot: true
+    description: Language switcher that appears on dark backgrounds
+    pageTemplateOptions:
+      bodyClasses: app-template__body--inverse
+    options:
+      classes: govuk-language-switcher--inverse
+      items:
+        - text: English
+          lang: en
+          current: true
+        - text: Cymraeg
+          lang: cy
+          href: '#/cy'
   - name: with translated navigation label
     description: When the current page is not in English, translate the `ariaLabel` into the language of the current page.
     options: