@moduk/frontend 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduk/frontend",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "The MOD.UK Frontend contains the code you need to start building a user interface for Ministry of Defence platforms and services.",
   "main": "dist/lib/index.js",
   "sass": "src/css/index.scss",
@@ -111,6 +111,7 @@
     "postcss-fail-on-warn": "^0.2.1",
     "release-it": "^15.7.0",
     "sass": "^1.59.3",
+    "sass-true": "^7.0.0",
     "shx": "^0.3.4",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",

package/src/css/__tests__/_colour-palette.test.scss

@@ -0,0 +1,42 @@
+@use 'sass-true' as test;
+@use '../colour-palette' as moduk;
+
+@include test.describe('moduk-colour') {
+  @include test.it('returns untinted colours') {
+    @include test.assert-equal(moduk.moduk-colour('dark-purple'), #532a45);
+    @include test.assert-equal(moduk.moduk-colour('dark-grey'), #323e48);
+    @include test.assert-equal(moduk.moduk-colour('dark-blue'), #13284c);
+    @include test.assert-equal(moduk.moduk-colour('dark-green'), #153e35);
+    @include test.assert-equal(moduk.moduk-colour('dark-yellow'), #f6a800);
+    @include test.assert-equal(moduk.moduk-colour('dark-orange'), #e0592b);
+    @include test.assert-equal(moduk.moduk-colour('dark-pink'), #8e1537);
+    @include test.assert-equal(moduk.moduk-colour('muted-purple'), #94368d);
+    @include test.assert-equal(moduk.moduk-colour('muted-grey'), #7b98ac);
+    @include test.assert-equal(moduk.moduk-colour('muted-blue'), #4298cc);
+    @include test.assert-equal(moduk.moduk-colour('muted-green'), #00945f);
+    @include test.assert-equal(moduk.moduk-colour('muted-yellow'), #ffc845);
+    @include test.assert-equal(moduk.moduk-colour('muted-orange'), #f28b00);
+    @include test.assert-equal(moduk.moduk-colour('muted-pink'), #fa7699);
+    @include test.assert-equal(moduk.moduk-colour('bright-purple'), #ab92e1);
+    @include test.assert-equal(moduk.moduk-colour('bright-grey'), #becdd6);
+    @include test.assert-equal(moduk.moduk-colour('bright-blue'), #3db5e6);
+    @include test.assert-equal(moduk.moduk-colour('bright-green'), #00ce7d);
+    @include test.assert-equal(moduk.moduk-colour('bright-yellow'), #ffc600);
+    @include test.assert-equal(moduk.moduk-colour('bright-orange'), #ff8200);
+    @include test.assert-equal(moduk.moduk-colour('bright-pink'), #f087cf);
+    @include test.assert-equal(moduk.moduk-colour('light-maroon'), #643f58);
+    @include test.assert-equal(moduk.moduk-colour('maroon'), #532a45);
+    @include test.assert-equal(moduk.moduk-colour('dark-maroon'), #4b263e);
+  }
+
+  @include test.it('returns tinted colours') {
+    @include test.assert-equal(moduk.moduk-colour('dark-purple', 80), #75556a);
+    @include test.assert-equal(moduk.moduk-colour('dark-purple', 60), #987f8f);
+    @include test.assert-equal(moduk.moduk-colour('dark-purple', 40), #baaab5);
+    @include test.assert-equal(moduk.moduk-colour('dark-purple', 20), #ddd4da);
+    @include test.assert-equal(moduk.moduk-colour('dark-grey', 80), #5b656d);
+    @include test.assert-equal(moduk.moduk-colour('dark-grey', 60), #848b91);
+    @include test.assert-equal(moduk.moduk-colour('dark-grey', 40), #adb2b6);
+    @include test.assert-equal(moduk.moduk-colour('dark-grey', 20), #d6d8da);
+  }
+}

package/src/css/__tests__/index.test.ts

@@ -0,0 +1,17 @@
+// @vitest-environment node
+
+import { globSync } from 'glob'
+import { join } from 'node:path'
+import sassTrue from 'sass-true'
+import { describe, it } from 'vitest'
+
+globSync(join(__dirname, '**/*.test.scss'), { windowsPathsNoEscape: true }).forEach((filePath) => {
+  sassTrue.runSass(
+    { describe, it },
+    filePath,
+    {
+      loadPaths: ['node_modules'],
+      quietDeps: true,
+    },
+  )
+})

package/src/css/_colour-palette.scss

@@ -1,15 +1,67 @@
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+
+@use 'govuk-frontend/govuk/helpers/colour';
+
 $moduk-colours: (
-  'maroon': #532a45,
+  'dark-purple': #532a45,
+  'dark-grey': #323e48,
+  'dark-blue': #13284c,
+  'dark-green': #153e35,
+  'dark-yellow': #f6a800,
+  'dark-orange': #e0592b,
+  'dark-pink': #8e1537,
+  'muted-purple': #94368d,
+  'muted-grey': #7b98ac,
+  'muted-blue': #4298cc,
+  'muted-green': #00945f,
+  'muted-yellow': #ffc845,
+  'muted-orange': #f28b00,
+  'muted-pink': #fa7699,
+  'bright-purple': #ab92e1,
+  'bright-grey': #becdd6,
+  'bright-blue': #3db5e6,
+  'bright-green': #00ce7d,
+  'bright-yellow': #ffc600,
+  'bright-orange': #ff8200,
+  'bright-pink': #f087cf,
+);
+
+$legacy-moduk-colours: (
+  'maroon': map-get($moduk-colours, 'dark-purple'),
   'dark-maroon': #4b263e,
   'light-maroon': #643f58,
 );
 
-@function moduk-colour($colour-name) {
+// Get a colour from the MOD.UK colour palette.
+//
+// @param $colour-name {String} the name of the colour (e.g. dark-purple, muted-blue)
+// @param $tint {Number} Optional colour tint (80, 60, 40 or 20)
+//
+// @return {String}
+@function moduk-colour($colour-name, $tint: null) {
+  $valid_tints: [20, 40, 60, 80];
   $quoted-colour-name: quote($colour-name);
+  $all_colours: map.merge($legacy-moduk-colours, $moduk-colours);
+
+  @if $tint and not list.index($valid_tints, $tint) {
+    @error "Invalid tint `#{$tint}`";
+  }
 
-  @if not map-has-key($moduk-colours, $quoted-colour-name) {
+  @if not map.has-key($all_colours, $quoted-colour-name) {
     @error "Unknown colour `#{$quoted-colour-name}`";
   }
 
-  @return map-get($moduk-colours, $quoted-colour-name);
+  @if $tint and map.has-key($legacy-moduk-colours, $quoted-colour-name) {
+    @error "Invalid tint `#{$tint}` for colour `#{$quoted-colour-name}`";
+  }
+
+  $resolved_colour: map.get($all_colours, $quoted-colour-name);
+
+  @if $tint {
+    @return colour.govuk-tint($resolved_colour, 100 - $tint);
+  }
+
+  @return $resolved_colour;
 }