Adds theme setting for extra CSS

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: ''

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');
+  }
 }
 
 /**

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) }}>
     {#