Style local tasks

web/themes/custom/opdavies/assets/tailwind.config.ts

@@ -16,6 +16,7 @@ export default {
         400: "#60a5fa",
       },
       current: "currentColor",
+      gray: colours.stone,
       grey: colours.stone,
       inherit: "inherit",
       transparent: "transparent",

web/themes/custom/opdavies/templates/navigation/menu-local-task.html.twig

@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+<li{{ attributes }}>
+  {% if is_active %}
+    {{ link|add_class('inline-block p-4 text-blue-primary border-b-2 border-blue-primary rounded-t-lg active dark:text-blue-400 dark:border-blue-400') }}
+  {% else %}
+    {{ link|add_class('inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300') }}
+  {% endif %}
+ </li>

web/themes/custom/opdavies/templates/navigation/menu-local-tasks.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override to display primary and secondary local tasks.
+ *
+ * Available variables:
+ * - primary: HTML list items representing primary tasks.
+ * - secondary: HTML list items representing secondary tasks.
+ *
+ * Each item in these variables (primary and secondary) can be individually
+ * themed in menu-local-task.html.twig.
+ */
+#}
+<div class="mb-12">
+  <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+    {% if primary %}
+      <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+      <ul class="flex flex-wrap -mb-px">{{ primary }}</ul>
+    {% endif %}
+    {% if secondary %}
+      <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+      <ul>{{ secondary }}</ul>
+    {% endif %}
+  </div>
+</div>