From 07ee1d6ce66fa56d88e563d6d01d981eae014bc0 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Mon, 15 Sep 2025 14:56:11 +0100
Subject: [PATCH] Adds theme setting for extra CSS

---
 config/schema/localgov_base.schema.yml |  5 +++++
 localgov_base.theme                    | 19 +++++++++++++++++++
 templates/layout/html.html.twig        | 20 ++++++++++++++------
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/config/schema/localgov_base.schema.yml b/config/schema/localgov_base.schema.yml
index 530c92bc..b8234368 100644
--- a/config/schema/localgov_base.schema.yml
+++ b/config/schema/localgov_base.schema.yml
@@ -41,3 +41,8 @@ localgov_base.settings:
       label: 'Responsive WYSIWYG tables'
       description: 'Choose whether to make WYSIWYG tables responsive or not.'
       default_value: TRUE
+    localgov_base_extra_css:
+      type: string
+      label: 'Extra CSS'
+      description: 'Add any additional CSS styles you want to include.'
+      default_value: ''
diff --git a/localgov_base.theme b/localgov_base.theme
index 35f4e27e..ff99de8b 100644
--- a/localgov_base.theme
+++ b/localgov_base.theme
@@ -145,6 +145,19 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa
     '#description'   => t('This will display the guide navigation vertically above the guide.'),
   ];
 
+  $form['localgov_base_settings']['theme_styles_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('Theme Styles'),
+    '#description' => t('Control various theme styles.'),
+  ];
+
+  $form['localgov_base_settings']['theme_styles_fieldset']['localgov_base_extra_css'] = [
+    '#type' => 'textarea',
+    '#title' => t('Extra CSS'),
+    '#default_value' => theme_get_setting('localgov_base_extra_css') ?: '',
+    '#description' => t('Add any additional CSS styles you want to include. We suggest this box should only be used for small amounts of CSS during development. CSS should ideally be added in your sub-theme and tracked in version control.'),
+  ];
+
   $form['#validate'][] = 'localgov_base_theme_settings_validate';
 }
 
@@ -200,6 +213,12 @@ function localgov_base_preprocess_html(&$variables): void {
       $variables['#attached']['library'][] = 'localgov_base/responsive-tables';
     }
   }
+
+  // Add CSS variables for accent colour, line height, and default spacing.
+  if (!empty(theme_get_setting('localgov_base_extra_css'))) {
+    // Add a style tag with the custom CSS to the head.
+    $variables['localgov_base_extra_css'] = theme_get_setting('localgov_base_extra_css');
+  }
 }
 
 /**
diff --git a/templates/layout/html.html.twig b/templates/layout/html.html.twig
index 29827fb8..89483211 100644
--- a/templates/layout/html.html.twig
+++ b/templates/layout/html.html.twig
@@ -39,9 +39,9 @@
     <title>{{ head_title|safe_join(' | ') }}</title>
     <css-placeholder token="{{ placeholder_token }}">
     <js-placeholder token="{{ placeholder_token }}">
-    
+
     {% block favicons %}
-      {# 
+      {#
         Adding favicons as a block, so theme's can easily remove this section
         (by simply placing an empty block in their subtheme). You might want
         to do this if you want to use the favicon uploader from the theme
@@ -58,21 +58,29 @@
       <link rel="shortcut icon" href="/{{ base_path ~ directory }}/assets/images/favicons/favicon.ico">
       <meta name="msapplication-config" content="favicons/browserconfig.xml">
     {% endblock %}
-    
+
     {% block extra_head_items %}
-      {# 
+      {#
         We are creating a Twig block here so we can override it in our sub-themes.
         The items in this have hard-coded colours that you will probably want to change.
-        You can also use this block for things like loading external fonts, such as 
+        You can also use this block for things like loading external fonts, such as
         those from Google Fonts like so:
           <link rel="preconnect" href="https://fonts.googleapis.com">
           <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-          <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 
+          <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
       #}
       <link rel="mask-icon" href="/{{ base_path ~ directory }}/assets/images/favicons/safari-pinned-tab.svg" color="#ffffff">
       <meta name="msapplication-TileColor" content="#ffffff">
       <meta name="theme-color" content="#ffffff">
     {% endblock %}
+
+    {# Add any CSS added via the UI #}
+    {% if localgov_base_extra_css %}
+      <style>
+        {{ localgov_base_extra_css }}
+      </style>
+    {% endif %}
+
   </head>
   <body{{ attributes.addClass(body_classes) }}>
     {#