Fork the secondary-button-link style to develop a new link styling #3342

src/read-side/html-pages/search-page/_index.scss

@@ -1,9 +1,20 @@
+@use 'sass:color';
+@use 'button';
 @use 'functions';
 @use 'list';
+@use 'settings';
 
 .search-categories {
   @include list.basics();
   display: flex;
   flex-flow: row wrap;
   gap: functions.px-to-rem(32px);
 }
+
+.search-categories__link {
+  @include button.link(
+    $text: settings.$colour-text-primary,
+    $background: settings.$colour-background-grey,
+    $background-hover: color.adjust(settings.$colour-background-grey, $lightness: -12%),
+    );
+}

src/read-side/html-pages/search-page/render-as-html/render-page.ts

@@ -7,7 +7,7 @@ import { ViewModel } from '../view-model';
 
 const renderSearchCategories = (viewModel: ViewModel) => pipe(
   viewModel,
-  RA.map((category) => toHtmlFragment(`<a href="${category.href}">${category.title}</a>`)),
+  RA.map((category) => toHtmlFragment(`<a href="${category.href}" class="search-categories__link">${category.title}</a>`)),
   renderListItems,
   (categories) => `
     <section>

src/read-side/html-pages/shared-sass/_button.scss

@@ -3,7 +3,7 @@
 @use 'settings';
 @use 'typography';
 
-@mixin _link($text, $background, $background-hover) {
+@mixin link($text, $background, $background-hover) {
   @include typography.button();
 
   display: inline-block;
@@ -61,7 +61,7 @@
 }
 
 @mixin primary-link {
-  @include _link(
+  @include link(
     $text: settings.$colour-white,
     $background: settings.$colour-accent,
     $background-hover: settings.$colour-accent-hover,
@@ -77,7 +77,7 @@
 }
 
 @mixin secondary-link() {
-  @include _link(
+  @include link(
     $text: settings.$colour-text-primary,
     $background: settings.$colour-background-grey,
     $background-hover: color.adjust(settings.$colour-background-grey, $lightness: -12%),