first commit

core/themes/olivero/templates/block/block--page-title-block.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Olivero's implementation to display a block.
+ *
+ * Available variables:
+ * - layout: String that will determine the layout of the block.
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+    layout ? 'layout--' ~ layout|clean_class,
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {{ content }}
+  {{ title_suffix }}
+</div>

core/themes/olivero/templates/block/block--primary-menu--plugin-id--search-form-block.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for a search form block in the Primary Menu region.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values, including:
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - content_attributes: A list of HTML attributes applied to the main content
+ * - attributes: A list HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template. Includes:
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ * @see search_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-search-narrow',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>

core/themes/olivero/templates/block/block--search-form-block.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for a search form block.
+ *
+ * Available variables:
+ * - content: The content of this block.
+ * - content_attributes: A list of HTML attributes applied to the main content
+ *   tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ * @see search_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-search',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content', 'container-inline') }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>

core/themes/olivero/templates/block/block--secondary-menu--plugin-id--search-form-block.html.twig

@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Theme implementation for a search form block in the Secondary Menu region.
+ *
+ * Available variables:
+ * - content: The content of this block.
+ * - content_attributes: A list of HTML attributes applied to the main content
+ *   tag that appears in the template.
+ * - label: The configured label of the block if visible.
+ * - attributes: HTML attributes for the wrapper.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ * @see search_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-search-wide',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <button class="block-search-wide__button" aria-label="{{ 'Search Form'|t }}" data-drupal-selector="block-search-wide-button">
+      {% include "@olivero/../images/search.svg" %}
+      <span class="block-search-wide__button-close"></span>
+    </button>
+
+    {#
+      Add tabindex=“-1” to prevent Safari from closing search bar when the submit button is clicked with a mouse.
+      @see https://www.drupal.org/project/drupal/issues/3269716
+      @see https://bugs.webkit.org/show_bug.cgi?id=229895
+    #}
+    <div{{ content_attributes.addClass('block-search-wide__wrapper').setAttribute('data-drupal-selector', 'block-search-wide-wrapper').setAttribute('tabindex', '-1') }}>
+      <div class="block-search-wide__container">
+        <div class="block-search-wide__grid">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+  {% endblock %}
+</div>

core/themes/olivero/templates/block/block--secondary-menu.html.twig

@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Olivero's override for the User Account Menu navigation block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See https://juicystudio.com/article/screen-readers-display-none.php and
+ * https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-menu',
+  'navigation',
+  'menu--' ~ derivative_plugin_id|clean_class,
+  'secondary-nav',
+]
+%}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav {{ attributes.addClass(classes).setAttribute('aria-labelledby', heading_id).setAttribute('role', 'navigation') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <span{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</span>
+  {{ title_suffix }}
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

core/themes/olivero/templates/block/block--system-branding-block.html.twig

@@ -0,0 +1,32 @@
+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Olivero's theme implementation for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ */
+#}
+{% set attributes = attributes.addClass('site-branding') %}
+{% block content %}
+  <div class="site-branding__inner">
+    {% if site_logo %}
+      <a href="{{ path('<front>') }}" rel="home" class="site-branding__logo">
+        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" fetchpriority="high" />
+      </a>
+    {% endif %}
+    {% if site_name %}
+      <div class="site-branding__text">
+        <div class="site-branding__name">
+          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+{% endblock %}

core/themes/olivero/templates/block/block--system-menu-block.html.twig

@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Olivero's override for the main menu navigation block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See https://juicystudio.com/article/screen-readers-display-none.php and
+ * https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-menu',
+  'navigation',
+  'menu--' ~ derivative_plugin_id|clean_class,
+]
+%}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav {{ attributes.addClass(classes).setAttribute('aria-labelledby', heading_id).setAttribute('role', 'navigation') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.addClass('block__title').setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  {{ title_suffix }}
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

core/themes/olivero/templates/block/block--system-powered-by-block.html.twig

@@ -0,0 +1,21 @@
+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Olivero's theme implementation for Powered by Drupal block.
+ *
+ * The Powered by Drupal block is an optional link to the home page of the
+ * Drupal project.
+ *
+ */
+#}
+{% block content %}
+  {{ attach_library('olivero/powered-by-block') }}
+  <span>
+    {% trans %}Powered by{% endtrans %}
+    <a href="https://www.drupal.org">{% trans %}Drupal{% endtrans %}</a>
+    <span class="drupal-logo" role="img" aria-label="{{ 'Drupal Logo'|t }}">
+      {% include "@olivero/../images/drupal.svg" %}
+    </span>
+  </span>
+{% endblock %}

core/themes/olivero/templates/block/block.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Olivero's implementation to display a block.
+ *
+ * Available variables:
+ * - layout: String that will determine the layout of the block.
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+    layout ? 'layout--' ~ layout|clean_class,
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass('block__title') }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('block__content') }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>

core/themes/olivero/templates/content/book-node-export-html.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override for a single node in a printer-friendly outline.
+ *
+ * Available variables:
+ * - node: Fully loaded node.
+ * - depth: Depth of the current node inside the outline.
+ * - title: Node title.
+ * - content: Node content.
+ * - children: All the child nodes recursively rendered through this file.
+ *
+ * @see template_preprocess_book_node_export_html()
+ */
+#}
+<article id="node-{{ node.id }}" class="section-{{ depth }}">
+  <h1 class="book-heading">{{ title }}</h1>
+  {{ content }}
+  {{ children }}
+</article>

core/themes/olivero/templates/content/comment.html.twig

@@ -0,0 +1,119 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for comments.
+ *
+ * Available variables:
+ * - author: (optional) Comment author. Can be a link or plain text.
+ * - content: The content-related items for the comment display. Use
+ *   {{ content }} to print them all, or print a subset such as
+ *   {{ content.field_example }}. Use the following code to temporarily suppress
+ *   the printing of a given child element:
+ *   @code
+ *   {{ content|without('field_example') }}
+ *   @endcode
+ * - created: (optional) Formatted date and time for when the comment was
+ *   created. Preprocess functions can reformat it by calling
+ *   DateFormatter::format() with the desired parameters on the
+ *   'comment.created' variable.
+ * - changed: (optional) Formatted date and time for when the comment was last
+ *   changed. Preprocess functions can reformat it by calling
+ *   DateFormatter::format() with the desired parameters on the
+ *   'comment.changed' variable.
+ * - permalink: Comment permalink.
+ * - submitted: (optional) Submission information created from author and
+ *   created during template_preprocess_comment().
+ * - user_picture: (optional) The comment author's profile picture.
+ * - status: Comment status. Possible values are:
+ *   unpublished, published, or preview.
+ * - title: (optional) Comment title, linked to the comment.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class may contain one or more of the following classes:
+ *   - comment: The current template type; for instance, 'theming hook'.
+ *   - by-anonymous: Comment by an unregistered user.
+ *   - by-{entity-type}-author: Comment by the author of the parent entity,
+ *     eg. by-node-author.
+ *   - preview: When previewing a new or edited comment.
+ *   The following applies only to viewers who are registered users:
+ *   - unpublished: An unpublished comment visible only to administrators.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - content_attributes: List of classes for the styling of the comment content.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - threaded: A flag indicating whether the comments are threaded or not.
+ *
+ * These variables are provided to give context about the parent comment (if
+ * any, optional):
+ * - parent_comment: Full parent comment entity (if any).
+ * - parent_author: Equivalent to author for the parent comment.
+ * - parent_created: Equivalent to created for the parent comment.
+ * - parent_changed: Equivalent to changed for the parent comment.
+ * - parent_title: Equivalent to title for the parent comment.
+ * - parent_permalink: Equivalent to permalink for the parent comment.
+ * - parent: A text string of parent comment submission information created from
+ *   'parent_author' and 'parent_created' during template_preprocess_comment().
+ *   This information is presented to help screen readers follow lengthy
+ *   discussion threads. You can hide this from sighted users using the class
+ *   visually-hidden.
+ *
+ * These two variables are provided for context:
+ * - comment: Full comment object.
+ * - commented_entity: Entity the comments are attached to.
+ *
+ * @see template_preprocess_comment()
+ */
+#}
+{%
+  set classes = [
+    'comment',
+    'js-comment',
+    not parent_comment ? 'comment--level-1',
+    status != 'published' ? 'comment--' ~ status,
+    comment.owner.anonymous ? 'by-anonymous',
+    author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
+  ]
+%}
+{{ attach_library('olivero/comments') }}
+<article {{ attributes.addClass(classes).setAttribute('role', 'article').setAttribute('data-drupal-selector', 'comment') }}>
+  {#
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
+  #}
+  <span class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+
+  {% if submitted %}
+    <div class="comment__picture-wrapper">
+      <div class="comment__picture">
+        {{ user_picture }}
+      </div>
+    </div>
+  {% endif %}
+  <div class="comment__text-wrapper">
+    {% if submitted %}
+      <footer class="comment__meta">
+        <p class="comment__author">{{ author }}</p>
+        <p class="comment__time">{{ created }}</p>
+        {#
+          Indicate the semantic relationship between parent and child comments
+          for accessibility. The list is difficult to navigate in a screen
+          reader without this information.
+         #}
+        {% if parent %}
+          <p class="visually-hidden">{{ parent }}</p>
+        {% endif %}
+      </footer>
+    {% endif %}
+    <div{{ content_attributes.addClass('comment__content') }}>
+      {% if title %}
+        {{ title_prefix }}
+        <h3{{ title_attributes }}>{{ title }}</h3>
+        {{ title_suffix }}
+      {% endif %}
+      {{ content }}
+    </div>
+  </div>
+</article>

core/themes/olivero/templates/content/media.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item.
+ *
+ * Available variables:
+ * - media: The media item, with limited access to object properties and
+ *   methods.
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'media',
+    'media--type-' ~ media.bundle()|clean_class,
+    not media.isPublished() ? 'media--unpublished',
+    view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_suffix.contextual_links }}
+  {% if content %}
+    {{ content }}
+  {% endif %}
+</div>

core/themes/olivero/templates/content/node--teaser.html.twig

@@ -0,0 +1,122 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation to display a node teaser.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ */
+#}
+
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+
+
+{% embed "olivero:teaser" with {
+  attributes: attributes.addClass(classes),
+  author_attributes,
+  author_name,
+  content,
+  date,
+  display_submitted,
+  label,
+  metadata,
+  title_attributes,
+  title_prefix,
+  title_suffix,
+  read_more,
+  url,
+  } only %}
+  {% block prefix %}
+    {{ title_prefix }}
+    {{ title_suffix }}
+  {% endblock %}
+  {% block meta %}
+    {% if display_submitted %}
+      <div class="node__meta">
+        <span{{ author_attributes }}>
+          {{ 'By'|t }} {% apply spaceless %}<span class="node__author">{{ author_name }}</span>{% endapply %}, {{ date }}
+        </span>
+        {{ metadata }}
+      </div>
+    {% endif %}
+  {% endblock %}
+  {% block image %}{{~ content.field_image ~}}{% endblock %}
+  {% block title %}
+    {% if label and not page %}
+      <h2{{ title_attributes.addClass('node__title', 'teaser__title') }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
+    {% endif %}
+  {% endblock %}
+  {% block content %}
+    {{ content|without('field_image', 'links') }}
+  {% endblock %}
+{% endembed %}

core/themes/olivero/templates/content/node.html.twig

@@ -0,0 +1,115 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ */
+#}
+
+{% set layout = layout ? 'layout--' ~ layout|clean_class %}
+
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    layout ? 'grid-full',
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+<article{{ attributes.addClass(classes) }}>
+  <header class="{{ layout }}">
+    {{ title_prefix }}
+      {% if label and not page %}
+      <h2{{ title_attributes.addClass('node__title') }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
+    {% endif %}
+    {{ title_suffix }}
+    {% if display_submitted %}
+      <div class="node__meta">
+      {% if author_picture %}
+        <div class="node__author-image">
+          {{ author_picture }}
+        </div>
+      {% endif %}
+        <span{{ author_attributes }}>
+          {{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }}
+        </span>
+        {{ metadata }}
+      </div>
+    {% endif %}
+  </header>
+  <div{{ content_attributes.addClass('node__content', layout) }}>
+    {# Comments not part of content, so they won't inherit .text-content styles. #}
+    {{ content|without('comment') }}
+  </div>
+  {% if content.comment %}
+    <div id="comments" class="{{ layout }}">
+      {{ content.comment }}
+    </div>
+  {% endif %}
+</article>

core/themes/olivero/templates/content/page-title.html.twig

@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for a page title.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ */
+#}
+{%
+  set classes = [
+    'title',
+    'page-title',
+  ]
+%}
+
+{{ title_prefix }}
+{% if (title|render|striptags|trim is not empty) %}
+  <h1{{ title_attributes.addClass(classes) }}>{{ title }}</h1>
+{% endif %}
+{{ title_suffix }}

core/themes/olivero/templates/content/search-result.html.twig

@@ -0,0 +1,80 @@
+{#
+/**
+ * @file
+ * Theme override for displaying a single search result.
+ *
+ * This template renders a single search result. The list of results is
+ * rendered using '#theme' => 'item_list', with suggestions of:
+ * - item_list__search_results__(plugin_id)
+ * - item_list__search_results
+ *
+ * Available variables:
+ * - url: URL of the result.
+ * - title: Title of the result.
+ * - snippet: A small preview of the result. Does not apply to user searches.
+ * - info: String of all the meta information ready for print. Does not apply
+ *   to user searches.
+ * - plugin_id: The machine-readable name of the plugin being executed,such
+ *   as "node_search" or "user_search".
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - info_split: Contains same data as info, but split into separate parts.
+ *   - info_split.type: Node type (or item type string supplied by module).
+ *   - info_split.user: Author of the node linked to users profile. Depends
+ *     on permission.
+ *   - info_split.date: Last update of the node. Short formatted.
+ *   - info_split.comment: Number of comments output as "% comments", %
+ *     being the count. (Depends on comment.module).
+ *   items should instead be within info and renamed info.foo, info.bar, etc.
+ *
+ * Other variables:
+ * - title_attributes: HTML attributes for the title.
+ * - content_attributes: HTML attributes for the content.
+ *
+ * Since info_split is keyed, a direct print of the item is possible.
+ * This array does not apply to user searches so it is recommended to check
+ * for its existence before printing. The default keys of 'type', 'user' and
+ * 'date' always exist for node searches. Modules may provide other data.
+ * @code
+ *   {% if (info_split.comment) %}
+ *     <span class="info-comment">
+ *       {{ info_split.comment }}
+ *     </span>
+ *   {% endif %}
+ * @endcode
+ *
+ * To check for all available data within info_split, use the code below.
+ * @code
+ *   <pre>
+ *     {{ dump(info_split) }}
+ *   </pre>
+ * @endcode
+ *
+ * @see template_preprocess_search_result()
+ */
+#}
+{{ attach_library('olivero/search-results') }}
+{% if info_split %}
+  <div class="search-result__meta">
+    {% if info_split.user %}
+      <span>
+        {{ 'By'|t }} {% apply spaceless %}<span class="search-result__author">{{ info_split.user }}</span>{% endapply %}
+      </span>
+    {% endif %}
+    {% if info_date %}
+      <span  class="search-result__date">, {{ info_date }}</span>
+    {% endif %}
+  </div>
+{% endif %}
+{% if title %}
+  {{ title_prefix }}
+  <h3{{ title_attributes.addClass('search-result__title') }}>
+    <a href="{{ url }}">{{ title }}</a>
+  </h3>
+  {{ title_suffix }}
+{% endif %}
+{% if snippet %}
+  <div{{ content_attributes.addClass('search-result__snippet', layout, 'text-content') }}>{{ snippet }}</div>
+{% endif %}

core/themes/olivero/templates/dataset/forum-list.html.twig

@@ -0,0 +1,79 @@
+{#
+/**
+ * @file
+ * Theme override to display a list of forums and containers.
+ *
+ * Available variables:
+ * - forums: A collection of forums and containers to display. It is keyed to
+ *   the numeric IDs of all child forums and containers. Each forum in forums
+ *   contains:
+ *   - is_container: A flag indicating if the forum can contain other
+ *     forums. Otherwise, the forum can only contain topics.
+ *   - depth: How deep the forum is in the current hierarchy.
+ *   - zebra: 'even' or 'odd', used for row class.
+ *   - icon_class: 'default' or 'new', used for forum icon class.
+ *   - icon_title: Text alternative for the forum icon.
+ *   - name: The name of the forum.
+ *   - link: The URL to link to this forum.
+ *   - description: The description field for the forum, containing:
+ *     - value: The descriptive text for the forum.
+ *   - new_topics: A flag indicating if the forum contains unread posts.
+ *   - new_url: A URL to the forum's unread posts.
+ *   - new_text: Text for the above URL, which tells how many new posts.
+ *   - old_topics: A count of posts that have already been read.
+ *   - num_posts: The total number of posts in the forum.
+ *   - last_reply: Text representing the last time a forum was posted or
+ *     commented in.
+ * - forum_id: Forum ID for the current forum. Parent to all items within the
+ *   forums array.
+ *
+ * @see template_preprocess_forum_list()
+ */
+#}
+<table id="forum-{{ forum_id }}">
+  <thead>
+    <tr>
+      <th>{{ 'Forum'|t }}</th>
+      <th>{{ 'Topics'|t }}</th>
+      <th>{{ 'Posts'|t }}</th>
+      <th>{{ 'Last post'|t }}</th>
+    </tr>
+  </thead>
+  <tbody>
+  {% for child_id, forum in forums %}
+    <tr id="forum-list-{{ child_id }}" class="{{ forum.zebra }}">
+      <td {% if forum.is_container == true -%}
+        colspan="4" class="container"
+      {%- else -%}
+        class="forum-list__forum"
+      {%- endif -%}>
+        {#
+          Enclose the contents of this cell with X divs, where X is the
+          depth this forum resides at. This will allow us to use CSS
+          left-margin for indenting.
+        #}
+        {% if forum.depth > 0 %}{% for i in 1..forum.depth %}<div class="indented">{% endfor %}{% endif %}
+          <div class="forum__icon forum-status-{{ forum.icon_class }}" title="{{ forum.icon_title }}">
+            <span class="visually-hidden">{{ forum.icon_title }}</span>
+          </div>
+          <div class="forum__name"><a href="{{ forum.link }} " class="forum__name--link">{{ forum.label }}</a></div>
+          {% if forum.description.value %}
+            <div class="forum__description">{{ forum.description.value }}</div>
+          {% endif %}
+          {% if forum.depth > 0 %}{% for i in 1..forum.depth %}</div>{% endfor %}{% endif %}
+      </td>
+      {% if forum.is_container == false %}
+        <td class="forum__topics">
+          {{ forum.num_topics }}
+          {% if forum.new_topics == true %}
+            <br />
+            <a href="{{ forum.new_url }}">{{ forum.new_text }}</a>
+          {% endif %}
+        </td>
+        <td class="forum__posts">{{ forum.num_posts }}</td>
+        <td class="forum__last-reply">{{ forum.last_reply }}</td>
+      {% endif %}
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>

core/themes/olivero/templates/dataset/forums.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme override to display a forum.
+ *
+ * May contain forum containers as well as forum topics.
+ *
+ * Available variables:
+ * - forums: The forums to display (as processed by forum-list.html.twig).
+ * - topics: The topics to display.
+ * - topics_pager: The topics pager.
+ * - forums_defined: A flag to indicate that the forums are configured.
+ *
+ * @see template_preprocess_forums()
+ */
+#}
+{{ attach_library('olivero/forum') }}
+{% if forums_defined %}
+  <div class="forum">
+    {{ forums }}
+    {{ topics }}
+    {{ topics_pager }}
+  </div>
+{% endif %}

core/themes/olivero/templates/dataset/item-list--search-results.html.twig

@@ -0,0 +1,34 @@
+{% extends "item-list.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for an item list of search results.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: An list of contextual data associated with the list. For search
+ *   results, the following data is set:
+ *   - plugin: The search plugin ID, for example "node_search".
+ *
+ * @see template_preprocess_item_list()
+ */
+#}
+{%
+  set classes = [
+  'search-results',
+  context.plugin ~ '-results',
+]
+%}
+{%
+  set listClasses = [
+  'search-results__item',
+]
+%}
+{% set attributes = attributes.addClass(classes) %}

core/themes/olivero/templates/dataset/item-list.html.twig

@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Theme override for an item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ *   - list_style: The custom list style.
+ *
+ * @see template_preprocess_item_list()
+ */
+#}
+{% if context.list_style %}
+  {%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+{% endif %}
+{% if items or empty %}
+  {%- if title is not empty -%}
+    <h3>{{ title }}</h3>
+  {%- endif -%}
+  {%- if items -%}
+    <{{ list_type }}{{ attributes }}>
+    {%- for item in items -%}
+      <li{{ item.attributes.addClass(listClasses) }}>{{ item.value }}</li>
+    {%- endfor -%}
+    </{{ list_type }}>
+  {%- else -%}
+    {{- empty -}}
+  {%- endif -%}
+{%- endif %}

core/themes/olivero/templates/datetime-form.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override of a datetime form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the datetime form element.
+ * - content: The datelist form element to be output.
+ *
+ * @see template_preprocess_datetime_form()
+ */
+#}
+<div{{ attributes.addClass('form-items-inline') }}>
+  {{ content }}
+</div>

core/themes/olivero/templates/datetime-wrapper.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Theme override of a datetime form wrapper.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{%
+  set title_classes = [
+    'form-item__label',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
+%}
+<div class="form-item form-datetime-wrapper">
+  {% if title %}
+    <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+  {% endif %}
+  {{ content }}
+  {% if errors %}
+    <div class="form-item__error-message">
+      {{ errors }}
+    </div>
+  {% endif %}
+  {% if description %}
+    <div{{ description_attributes.addClass('form-item__description') }}>
+      {{ description }}
+    </div>
+  {% endif %}
+</div>

core/themes/olivero/templates/field/field--comment-body.html.twig

@@ -0,0 +1,70 @@
+{#
+/**
+ * @file
+ * Olivero's theme override for comment body field.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{%
+  set item_classes = [
+    'field__item',
+    'comment__text-content',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass(item_classes) }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, item_classes) }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass(item_classes) }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/themes/olivero/templates/field/field--comment.html.twig

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Theme override for comment fields.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional title output populated by modules, intended to
+ *   be displayed after the main title tag that appears in the template.
+ * - comments: List of comments rendered through comment.html.twig.
+ * - comment_count: Count of comments rendered through comment.html.twig.
+ * - content_attributes: HTML attributes for the form title.
+ * - comment_form: The 'Add new comment' form.
+ * - comment_display_mode: Is the comments are threaded.
+ * - comment_type: The comment type bundle ID for the comment field.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ * @see comment_preprocess_field()
+ */
+#}
+
+{{ attach_library('olivero/comments') }}
+<section{{ attributes.setAttribute('data-drupal-selector', 'comments').addClass('comments') }}>
+
+  {% if not label_hidden %}
+    {{ title_prefix }}
+    <h2{{ title_attributes.addClass('comments__title') }}>
+      {{- label -}}
+      {%- if comments -%}
+        <span class="comments__count">{{ comment_count }}</span>
+      {%- endif -%}
+    </h2>
+    {{ title_suffix }}
+  {% endif %}
+
+  {% if comment_form %}
+    <div class="add-comment">
+      {% if user_picture %}
+      <div class="add-comment__picture-wrapper">
+        <div class="add-comment__picture">
+          {{ user_picture }}
+        </div>
+      </div>
+      {% endif %}
+      <div class="add-comment__form">
+        {{ comment_form }}
+      </div>
+    </div>
+  {% endif %}
+
+  {{ comments }}
+
+</section>

core/themes/olivero/templates/field/field--node--field-tags.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Olivero theme override for tags field.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the label.
+ * - label: The label for the field.
+ * - content_attributes: HTML attributes for the content.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    'field--tags',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    'field--tags__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{{ attach_library('olivero/tags') }}
+<div{{ attributes.addClass(classes) }}>
+  {% if not label_hidden %}
+    <h3{{ title_attributes.addClass(title_classes) }}>{{ label }}</h3>
+  {% endif %}
+  <ul class="links field__items field--tags__items">
+    {% for item in items %}
+      <li{{ item.attributes.addClass('field--tags__item') }}>{{ item.content }}</li>
+    {% endfor %}
+  </ul>
+</div>

core/themes/olivero/templates/field/field--text-long.html.twig

@@ -0,0 +1 @@
+{% extends "field--text.html.twig" %}

core/themes/olivero/templates/field/field--text-with-summary.html.twig

@@ -0,0 +1 @@
+{% extends "field--text.html.twig" %}

core/themes/olivero/templates/field/field--text.html.twig

@@ -0,0 +1,20 @@
+{% extends "field.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for a text field.
+ *
+ * A 'clearfix' class is added, because 'text' fields have a 'format' property
+ * that allows a Text Format to be associated with the entered text, which then
+ * applies filtering on output. A common use case is to align images to the left
+ * or right, and without this 'clearfix' class, such aligned images may be
+ * rendered outside of the 'text' field formatter's boundaries, and hence
+ * overlap with other fields. By setting the 'clearfix' class on all 'text'
+ * fields, we prevent that.
+ *
+ * @see https://www.drupal.org/node/2358529
+ *
+ * @ingroup themeable
+ */
+#}
+{% set attributes = attributes.addClass('clearfix') %}

core/themes/olivero/templates/field/field.html.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/themes/olivero/templates/filter/filter-guidelines.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Theme override for guidelines for a text format.
+ *
+ * Available variables:
+ * - format: Contains information about the current text format, including the
+ *   following:
+ *   - name: The name of the text format, potentially unsafe and needs to be
+ *     escaped.
+ *   - format: The machine name of the text format, e.g. 'basic_html'.
+ * - attributes: HTML attributes for the containing element.
+ * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id'
+ *   (only used when 'long' is TRUE) for each filter in one or more text
+ *   formats.
+ *
+ * @see template_preprocess_filter_tips()
+ */
+#}
+{%
+  set classes = [
+    'filter-guidelines__item',
+    'filter-guidelines__item--' ~ format.id|clean_class,
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  <h4 class="label">{{ format.label }}</h4>
+  {{ tips }}
+</div>

core/themes/olivero/templates/filter/filter-tips.html.twig

@@ -0,0 +1,66 @@
+{#
+/**
+ * @file
+ * Theme override for a set of filter tips.
+ *
+ * Available variables:
+ * - tips: Descriptions and a CSS ID in the form of 'module-name/filter-id'
+ *   (only used when 'long' is TRUE) for each filter in one or more text
+ *   formats.
+ * - long: A flag indicating whether the passed-in filter tips contain extended
+ *   explanations, i.e. intended to be output on the path 'filter/tips'
+ *   (TRUE), or are in a short format, i.e. suitable to be displayed below a
+ *   form element. Defaults to FALSE.
+ * - multiple: A flag indicating there is more than one filter tip.
+ *
+ * @see template_preprocess_filter_tips()
+ * @see claro_preprocess_filter_tips()
+ */
+#}
+{% if multiple %}
+  <h2>{{ 'Text Formats'|t }}</h2>
+{% endif %}
+
+{% if tips|length %}
+  {% if multiple %}
+    <div class="compose-tips">
+  {% endif %}
+
+  {% for name, tip in tips %}
+    {% if multiple %}
+      {%
+        set tip_classes = [
+          'compose-tips__item',
+          'compose-tips__item--name-' ~ name|clean_class,
+        ]
+      %}
+      <div{{ tip.attributes.addClass(tip_classes) }}>
+    {% endif %}
+    {% if multiple or long %}
+      <h3>{{ tip.name }}</h3>
+    {% endif %}
+
+    {% if tip.list|length %}
+      <ul class="filter-tips {{ long ? 'filter-tips--long' : 'filter-tips--short' }}">
+      {% for item in tip.list %}
+        {%
+          set item_classes = [
+            'filter-tips__item',
+            long ? 'filter-tips__item--long' : 'filter-tips__item--short',
+            long ? 'filter-tips__item--id-' ~ item.id|clean_class,
+          ]
+        %}
+        <li{{ item.attributes.addClass(item_classes) }}>{{ item.tip }}</li>
+      {% endfor %}
+      </ul>
+    {% endif %}
+
+    {% if multiple %}
+      </div>
+    {% endif %}
+  {% endfor %}
+
+  {% if multiple %}
+    </div>
+  {% endif %}
+{% endif %}

core/themes/olivero/templates/form--search-block-form.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override for a 'form' element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ */
+#}
+{%
+  set classes = [
+    'search-form',
+    'search-block-form',
+  ]
+%}
+<form{{ attributes.addClass(classes) }}>
+  {{ children }}
+</form>

core/themes/olivero/templates/form/details.html.twig

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - summary_attributes: A list of HTML attributes for the summary element.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ *
+ * @see template_preprocess_details()
+ * @see olivero_preprocess_details()
+ */
+#}
+{%
+  set classes = [
+    'olivero-details',
+  ]
+%}
+{%
+  set content_wrapper_classes = [
+    'olivero-details__wrapper',
+    'details-wrapper',
+  ]
+%}
+<details{{ attributes.addClass(classes) }}>
+  {%- if title -%}
+    {%
+      set summary_classes = [
+        'olivero-details__summary',
+        required ? 'js-form-required',
+        required ? 'form-required',
+      ]
+    %}
+    <summary{{ summary_attributes.addClass(summary_classes) }}>
+      {{- title -}}
+      {%- if required -%}
+        <span class="required-mark"></span>
+      {%- endif -%}
+    </summary>
+  {%- endif -%}
+  <div{{ content_attributes.addClass(content_wrapper_classes) }}>
+    {% if errors %}
+      <div class="form-item form-item--error-message">
+        {{ errors }}
+      </div>
+    {% endif %}
+    {%- if description -%}
+      <div class="olivero-details__description">{{ description }}</div>
+    {%- endif -%}
+    {%- if children -%}
+      {{ children }}
+    {%- endif -%}
+    {%- if value -%}
+      {{ value }}
+    {%- endif -%}
+  </div>
+</details>

core/themes/olivero/templates/form/field-multiple-value-form.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Theme override for an individual form element.
+ *
+ * Available variables for all fields:
+ * - multiple: Whether there are multiple instances of the field.
+ *
+ * Available variables for single cardinality fields:
+ * - elements: Form elements to be rendered.
+ *
+ * Available variables when there are multiple fields.
+ * - table: Table of field items.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the form element.
+ *   - attributes: HTML attributes to apply to the description container.
+ * - button: "Add another item" button.
+ *
+ * @see template_preprocess_field_multiple_value_form()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if multiple %}
+  {%
+    set classes = [
+      'js-form-item',
+      'form-item'
+    ]
+  %}
+  {%
+    set description_classes = [
+      'form-item__description',
+      disabled ? 'is-disabled',
+    ]
+  %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ table }}
+    {% if description.content %}
+      <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
+    {% endif %}
+    {% if button %}
+      <div class="form-actions">{{ button }}</div>
+    {% endif %}
+  </div>
+{% else %}
+  {% for element in elements %}
+    {{ element }}
+  {% endfor %}
+{% endif %}

core/themes/olivero/templates/form/fieldset.html.twig

@@ -0,0 +1,106 @@
+{#
+/**
+ * @file
+ * Theme override for a fieldset element and its children.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the <fieldset> element.
+ * - errors: (optional) Any errors for this <fieldset> element, may not be set.
+ * - required: Boolean indicating whether the <fieldset> element is required.
+ * - legend: The <legend> element containing the following properties:
+ *   - title: Title of the <fieldset>, intended for use as the text
+       of the <legend>.
+ *   - attributes: HTML attributes to apply to the <legend> element.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the <fieldset>.
+ *   - attributes: HTML attributes to apply to the description container.
+ * - description_display: Description display setting. It can have these values:
+ *   - before: The description is output before the element.
+ *   - after: The description is output after the element (default).
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
+ * - children: The rendered child elements of the <fieldset>.
+ * - prefix: The content to add before the <fieldset> children.
+ * - suffix: The content to add after the <fieldset> children.
+ * - title_display: Title display setting.
+ * - inline_items: Boolean indicating whether the <fieldset> items are inline.
+ *
+ * @see template_preprocess_fieldset()
+ * @see olivero_preprocess_fieldset()
+ */
+#}
+{%
+  set classes = [
+    'fieldset',
+    attributes.hasClass('fieldgroup') ? 'fieldset--group',
+    'js-form-item',
+    'form-item',
+    'js-form-wrapper',
+    'form-wrapper',
+  ]
+%}
+{%
+  set wrapper_classes = [
+    'fieldset__wrapper',
+    attributes.hasClass('fieldgroup') ? 'fieldset__wrapper--group',
+  ]
+%}
+{%
+  set legend_span_classes = [
+    'fieldset__label',
+    attributes.hasClass('fieldgroup') ? 'fieldset__label--group',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
+%}
+{%
+  set legend_classes = [
+    'fieldset__legend',
+    attributes.hasClass('fieldgroup') and not attributes.hasClass('form-composite') ? 'fieldset__legend--group',
+    attributes.hasClass('form-composite') ? 'fieldset__legend--composite',
+    title_display == 'invisible' ? 'fieldset__legend--invisible' : 'fieldset__legend--visible',
+  ]
+%}
+{%
+  set description_classes = [
+   'fieldset__description',
+  ]
+%}
+
+<fieldset{{ attributes.addClass(classes) }}>
+  {# Always wrap fieldset legends in a <span> for CSS positioning. #}
+  {% if legend.title %}
+  <legend{{ legend.attributes.addClass(legend_classes) }}>
+    <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
+  </legend>
+  {% endif %}
+
+  <div{{ content_attributes.addClass(wrapper_classes) }}>
+    {% if inline_items %}
+      <div class="container-inline">
+    {% endif %}
+
+    {% if description_display == 'before' and description.content %}
+      <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
+    {% endif %}
+    {% if prefix %}
+      <span class="fieldset__prefix">{{ prefix }}</span>
+    {% endif %}
+    {{ children }}
+    {% if suffix %}
+      <span class="fieldset__suffix">{{ suffix }}</span>
+    {% endif %}
+    {% if errors %}
+      <div class="fieldset__error-message">
+        {{ errors }}
+      </div>
+    {% endif %}
+    {% if description_display in ['after', 'invisible'] and description.content %}
+      <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
+    {% endif %}
+
+    {% if inline_items %}
+      </div>
+    {% endif %}
+  </div>
+</fieldset>

core/themes/olivero/templates/form/input--submit--header-search.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Theme override for the search form submit button.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ */
+#}
+<button{{ attributes }}>
+    <span class="icon--search"></span>
+    <span class="visually-hidden">{{ attributes.value }}</span>
+</button>
+{{ children }}

core/themes/olivero/templates/includes/get-started.html.twig

@@ -0,0 +1,46 @@
+{#
+/**
+ * @file
+ * Olivero's theme Get Started section.
+ *
+ * This section is enabled when no front page content has been populated.
+ *
+ * TODO:
+ * - Move this markup into Drupal's core Frontpage Views.
+ * - Translate/localize this page for different languages.
+ */
+#}
+
+{% set drupal_community = 'https://www.drupal.org/community' %}
+{% set drupal_values = 'https://www.drupal.org/about/values-and-principles' %}
+{% set drupal_user_guide = 'https://www.drupal.org/docs/user_guide/en/index.html' %}
+{% set create_content = path('node.add_page') %}
+{% set drupal_extend = 'https://www.drupal.org/docs/extending-drupal' %}
+{% set drupal_global_training_days = 'https://groups.drupal.org/global-training-days' %}
+{% set drupal_events = 'https://www.drupal.org/community/events' %}
+{% set drupal_slack = 'https://www.drupal.org/slack' %}
+{% set drupal_chat = 'https://www.drupal.org/drupalchat' %}
+{% set drupal_answers = 'https://drupal.stackexchange.com/' %}
+{% set drupal_support = 'https://www.drupal.org/support' %}
+
+<div class="text-content">
+  <p>{% trans %}<em>You haven’t created any frontpage content yet.</em>{% endtrans %}</p>
+  <h2>{% trans %}Congratulations and welcome to the Drupal community.{% endtrans %}</h2>
+  <p>{% trans %}Drupal is an open source platform for building amazing digital experiences. It’s made, used, taught, documented, and marketed by the <a href="{{ drupal_community }}">Drupal community</a>. Our community is made up of people from around the world with a shared set of <a href="{{ drupal_values }}">values</a>, collaborating together in a respectful manner. As we like to say:{% endtrans %}</p>
+  <blockquote>{% trans %}Come for the code, stay for the community.{% endtrans %}</blockquote>
+  <h2>{% trans %}Get Started{% endtrans %}</h2>
+  <p>{% trans %}There are a few ways to get started with Drupal:{% endtrans %}</p>
+  <ol>
+    <li>{% trans %}<a href="{{ drupal_user_guide }}">User Guide:</a> Includes installing, administering, site building, and maintaining the content of a Drupal website.{% endtrans %}</li>
+    <li>{% trans %}<a href="{{ create_content }}">Create Content:</a> Want to get right to work? Start adding content. <strong>Note:</strong> the information on this page will go away once you add content to your site. Read on and bookmark resources of interest.{% endtrans %}</li>
+    <li>{% trans %}<a href="{{ drupal_extend }}">Extend Drupal:</a> Drupal’s core software can be extended and customized in remarkable ways. Install additional functionality and change the look of your site using addons contributed by our community.{% endtrans %}</li>
+  </ol>
+  <h2>{% trans %}Next Steps{% endtrans %}</h2>
+  <p>{% trans %}Bookmark these links to our active Drupal community groups and support resources.{% endtrans %}</p>
+  <ul>
+    <li>{% trans %}<a href="{{ drupal_global_training_days }}">Global Training Days:</a> Helpful information for evaluating Drupal as a framework and as a career path. Taught in your local language.{% endtrans %}</li>
+    <li>{% trans %}<a href="{{ drupal_events }}">Upcoming Events:</a> Learn and connect with others at conferences and events held around the world.{% endtrans %}</li>
+    <li>{% trans %}<a href="{{ drupal_community }}">Community Page:</a> List of key Drupal community groups with their own content.{% endtrans %}</li>
+    <li>{% trans %}Get support and chat with the Drupal community on <a href="{{ drupal_slack }}">Slack</a> or <a href="{{ drupal_chat }}">DrupalChat</a>. When you’re looking for a solution to a problem, go to <a href="{{ drupal_support }}">Drupal Support</a> or <a href="{{ drupal_answers }}">Drupal Answers on Stack Exchange</a>.{% endtrans %}</li>
+  </ul>
+</div>

core/themes/olivero/templates/includes/preload.twig

@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * Preload the non-bold & non-italic fonts for the headings and the body copy.
+ *
+ * Available variables:
+ * - olivero_path: Returns the path to the Olivero theme.
+ */
+#}
+
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Bold.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/lora/lora-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

core/themes/olivero/templates/layout/book-export-html.html.twig

@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Theme override for printed version of book outline.
+ *
+ * Available variables:
+ * - title: Top level node title.
+ * - head: Header tags.
+ * - language: Language object.
+ * - language_rtl: A flag indicating whether the current display language is a
+ *   right to left language.
+ * - base_url: URL to the home page.
+ * - contents: Nodes within the current outline rendered through
+ *   book-node-export-html.html.twig.
+ *
+ * @see template_preprocess_book_export_html()
+ */
+#}
+<!DOCTYPE html>
+<html{{ html_attributes }}>
+  <head>
+    <title>{{ title }}</title>
+    {{ page.head }}
+    <base href="{{ base_url }}" />
+    <link type="text/css" rel="stylesheet" href="misc/print.css" />
+  </head>
+  <body>
+    {#
+      The given node is embedded to its absolute depth in a top level section.
+      For example, a child node with depth 2 in the hierarchy is contained in
+      (otherwise empty) div elements corresponding to depth 0 and depth 1. This
+      is intended to support WYSIWYG output - e.g., level 3 sections always look
+      like level 3 sections, no matter their depth relative to the node selected
+      to be exported as printer-friendly HTML.
+    #}
+
+  {% if depth > 1 %}{% for i in 1..depth - 1 %}
+    <div class="section-{{ i }}">
+  {% endfor %}{% endif %}
+  {{ contents }}
+  {% if depth > 1 %}{% for i in 1..depth - 1 %}
+    </div>
+  {% endfor %}{% endif %}
+  </body>
+</html>

core/themes/olivero/templates/layout/html.html.twig

@@ -0,0 +1,59 @@
+{#
+/**
+ * @file
+ * Theme override for the basic structure of a single Drupal page.
+ *
+ * Variables:
+ * - logged_in: A flag indicating if user is logged in.
+ * - root_path: The root path of the current page (e.g., node, admin, user).
+ * - node_type: The content type for the current node, if the page is a node.
+ * - head_title: List of text elements that make up the head_title variable.
+ *   May contain one or more of the following:
+ *   - title: The title of the page.
+ *   - name: The name of the site.
+ *   - slogan: The slogan of the site.
+ * - page_top: Initial rendered markup. This should be printed before 'page'.
+ * - page: The rendered page markup.
+ * - page_bottom: Closing rendered markup. This variable should be printed after
+ *   'page'.
+ * - db_offline: A flag indicating if the database is offline.
+ * - placeholder_token: The token for generating head, css, js and js-bottom
+ *   placeholders.
+ * - olivero_path: Returns the path to an Olivero theme.
+ * - noscript_styles: <noscript> content.
+ *
+ * @see template_preprocess_html()
+ */
+#}
+{%
+  set body_classes = [
+    logged_in ? 'user-logged-in',
+    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
+    node_type ? 'page-node-type-' ~ node_type|clean_class,
+    db_offline ? 'db-offline',
+  ]
+%}
+<!DOCTYPE html>
+<html{{ html_attributes }}>
+  <head>
+    <head-placeholder token="{{ placeholder_token }}">
+    <title>{{ head_title|safe_join(' | ') }}</title>
+    <css-placeholder token="{{ placeholder_token }}">
+    <js-placeholder token="{{ placeholder_token }}">
+    {% include '@olivero/includes/preload.twig' with {olivero_path: olivero_path} only %}
+    {{ noscript_styles }}
+  </head>
+  <body{{ attributes.addClass(body_classes) }}>
+    {#
+      Keyboard navigation/accessibility link to main content section in
+      page.html.twig.
+    #}
+    <a href="#main-content" class="visually-hidden focusable skip-link">
+      {{ 'Skip to main content'|t }}
+    </a>
+    {{ page_top }}
+    {{ page }}
+    {{ page_bottom }}
+    <js-bottom-placeholder token="{{ placeholder_token }}">
+  </body>
+</html>

core/themes/olivero/templates/layout/page.html.twig

@@ -0,0 +1,135 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.content: The main content of the current page.
+ * - page.sidebar: Items for the first sidebar.
+ * - page.featured_bottom_first: Items for the first featured bottom region.
+ * - page.featured_bottom_second: Items for the second featured bottom region.
+ * - page.footer_first: Items for the first footer column.
+ * - page.footer_second: Items for the second footer column.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.social: Items for the social region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+
+<div id="page-wrapper" class="page-wrapper">
+  <div id="page">
+
+    {% if page.header or page.primary_menu or page.secondary_menu %}
+      <header id="header" class="site-header" data-drupal-selector="site-header" role="banner">
+
+        {# Gets fixed by JavaScript at wide widths. #}
+        <div class="site-header__fixable" data-drupal-selector="site-header-fixable">
+          <div class="site-header__initial">
+            <button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'|t }}" aria-checked="false">
+              <span class="sticky-header-toggle__icon">
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+            </button>
+          </div>
+
+          {# Needs to extend full width so box shadow will also extend. #}
+          <div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">
+            <div class="container site-header__inner__container">
+
+              {{ page.header }}
+
+              {% if page.primary_menu or page.secondary_menu %}
+                <div class="mobile-buttons" data-drupal-selector="mobile-buttons">
+                  <button class="mobile-nav-button" data-drupal-selector="mobile-nav-button" aria-label="{{ 'Main Menu'|t }}" aria-controls="header-nav" aria-expanded="false">
+                    <span class="mobile-nav-button__label">{{ 'Menu'|t }}</span>
+                    <span class="mobile-nav-button__icon"></span>
+                  </button>
+                </div>
+
+                <div id="header-nav" class="header-nav" data-drupal-selector="header-nav">
+                  {{ page.primary_menu }}
+                  {{ page.secondary_menu }}
+                </div>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </header>
+    {% endif %}
+
+    <div id="main-wrapper" class="layout-main-wrapper layout-container">
+      <div id="main" class="layout-main">
+        <div class="main-content">
+          <a id="main-content" tabindex="-1"></a>
+          {{ page.hero }}
+          <div class="main-content__container container">
+            {{ page.highlighted }}
+            {{ page.breadcrumb }}
+
+            {% if page.sidebar %}
+              <div class="sidebar-grid grid-full">
+                <main role="main" class="site-main">
+                  {{ page.content_above }}
+                  {{ page.content }}
+                </main>
+
+                {{ page.sidebar }}
+              </div>
+            {% else %}
+              <main role="main">
+                {{ page.content_above }}
+                {{ page.content }}
+              </main>
+            {% endif %}
+            {{ page.content_below }}
+          </div>
+        </div>
+        <div class="social-bar">
+          {{ page.social }}
+        </div>
+      </div>
+    </div>
+
+    <footer class="site-footer">
+      <div class="site-footer__inner container">
+        {{ page.footer_top }}
+        {{ page.footer_bottom }}
+      </div>
+    </footer>
+
+    <div class="overlay" data-drupal-selector="overlay"></div>
+
+  </div>
+</div>

core/themes/olivero/templates/layout/region--breadcrumb.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the breadcrumb region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--content-above.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the content above region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--content-below.html.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the content below region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+  ]
+%}
+
+{{ attach_library('olivero/content-below') }}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--content.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the content region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }} id="content">
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--footer-bottom.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the footer bottom region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--footer-top.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the footer top region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="region--{{ region }}__inner">
+      {{ content }}
+    </div>
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--header.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the header region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{{ content }}
+<div class="header-nav-overlay" data-drupal-selector="header-nav-overlay"></div>

core/themes/olivero/templates/layout/region--highlighted.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the content region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+    'grid-full',
+    'layout--pass--content-medium',
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--primary-menu.html.twig

@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the header region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{{ content }}

core/themes/olivero/templates/layout/region--secondary-menu.html.twig

@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the header region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/layout/region--sidebar.html.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the sidebar region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+  ]
+%}
+
+{{ attach_library('olivero/sidebar') }}
+
+{% if content %}
+  <aside{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </aside>
+{% endif %}

core/themes/olivero/templates/layout/region--social.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display the social region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+
+<div class="social-bar__inner fixable">
+  <div class="rotate">
+    {{ content }}
+  </div>
+</div>

core/themes/olivero/templates/layout/region.html.twig

@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Olivero's theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region--' ~ region|clean_class,
+  ]
+%}
+
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

core/themes/olivero/templates/maintenance-page.html.twig

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation to display a single Drupal page while offline.
+ *
+ * All available variables are mirrored in page.html.twig.
+ *
+ * @see template_preprocess_maintenance_page()
+ */
+ #}
+
+<div id="page-wrapper" class="page-wrapper">
+  <div id="page">
+
+    <header id="header" class="site-header" role="banner" data-once="navigation">
+      <div class="site-header__fixable">
+        <div class="site-header__initial">
+        </div>
+        <div id="site-header__inner" class="site-header__inner">
+          <div class="container site-header__inner__container">
+            <div class="site-branding block block-system block-system-branding-block">
+              <div class="site-branding__inner">
+                <div class="site-branding__text">
+                  <div class="site-branding__name">
+                    {{ site_name }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div id="main-wrapper" class="layout-main-wrapper layout-container">
+      <div id="main" class="layout-main">
+        <div class="main-content">
+          <a id="main-content" tabindex="-1"></a>
+          <div class="main-content__container container">
+            {{ page.highlighted }}
+            <main role="main">
+              <div class="region region--content-above grid-full layout--pass--content-medium">
+                {% if title %}
+                  <h1 class="title" id="page-title">{{ title }}</h1>
+                {% endif %}
+              </div>
+              <div class="region region--content grid-full layout--pass--content-medium" id="content">
+                <div id="block-olivero-content" class="block block-system block-system-main-block text-content">
+                  {{ page.content }}
+
+                  {% include "@olivero/../images/site-under-maintenance-icon.svg" %}
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+        <div class="social-bar">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

core/themes/olivero/templates/menu-local-action.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Theme override for a single local action link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - link: A rendered link element.
+ *
+ * @see template_preprocess_menu_local_action()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('olivero/local-actions') }}
+
+<li{{ attributes }} class="action-links-item">{{ link }}</li>

core/themes/olivero/templates/misc/feed-icon.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme override for a feed icon.
+ *
+ * Available variables:
+ * - url: An internal system path or a fully qualified external URL of the feed.
+ * - title: Title of the feed for describing the feed on the subscribe link.
+ * - attributes: Remaining HTML attributes for the feed link.
+ *   - title: A descriptive title of the feed link.
+ *   - class: HTML classes to be applied to the feed link.
+ */
+#}
+
+{{ attach_library('olivero/feed') }}
+
+<a href="{{ url }}"{{ attributes.addClass('feed-icon') }}>
+  <span class="feed-icon__label">
+    {{ title }}
+  </span>
+  <span class="feed-icon__icon" aria-hidden="true">
+    {% include "@olivero/../images/rss.svg" %}
+  </span>
+</a>

core/themes/olivero/templates/misc/status-messages.html.twig

@@ -0,0 +1,75 @@
+{#
+/**
+ * @file
+ * Theme override for status messages.
+ *
+ * Displays status, error, and warning messages, grouped by type.
+ *
+ * An invisible heading identifies the messages for assistive technology.
+ * Sighted users see a colored box. See
+ * https://www.w3.org/TR/WCAG-TECHS/H69.html for info.
+ *
+ * Add an ARIA label to the contentinfo area so that assistive technology
+ * user agents will better describe this landmark.
+ *
+ * Available variables:
+ * - message_list: List of messages to be displayed, grouped by type.
+ * - status_headings: List of all status types.
+ * - attributes: HTML attributes for the element, including:
+ *   - class: HTML classes.
+ */
+#}
+{{ attach_library('olivero/messages') }}
+
+<div data-drupal-messages class="messages-list">
+  <div class="messages__wrapper layout-container">
+    {% for type, messages in message_list %}
+      {%
+        set classes = [
+        'messages-list__item',
+        'messages',
+        'messages--' ~ type,
+      ]
+      %}
+
+      <div{{ attributes
+        .addClass(classes)
+        .setAttribute('data-drupal-selector', 'messages')
+        .setAttribute('role', 'contentinfo')
+        .setAttribute('aria-label', status_headings[type])
+        }}>
+        <div class="messages__container" data-drupal-selector="messages-container"{% if type == 'error' %} role="alert"{% endif %}>
+          {% if status_headings[type] %}
+            <div class="messages__header">
+            <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
+              <div class="messages__icon">
+                {% if type == 'error' %}
+                  {% include "@olivero/../images/error.svg" %}
+                {% elseif type == 'warning' %}
+                  {% include "@olivero/../images/warning.svg" %}
+                {% elseif type == 'status' %}
+                  {% include "@olivero/../images/status.svg" %}
+                {% elseif type == 'info' %}
+                  {% include "@olivero/../images/info.svg" %}
+                {% endif %}
+              </div>
+            </div>
+          {% endif %}
+          <div class="messages__content">
+            {% if messages|length > 1 %}
+              <ul class="messages__list">
+                {% for message in messages %}
+                  <li class="messages__item">{{ message }}</li>
+                {% endfor %}
+              </ul>
+            {% else %}
+              {{ messages|first }}
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      {# Remove type specific classes. #}
+      {% set attributes = attributes.removeClass(classes) %}
+    {% endfor %}
+  </div>
+</div>

core/themes/olivero/templates/navigation/book-all-books-block.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for rendering book outlines within a block.
+ *
+ * This template is used only when the block is configured to "show block on all
+ * pages", which presents multiple independent books on all pages.
+ *
+ * Available variables:
+ * - book_menus: Book outlines.
+ *   - id: The parent book ID.
+ *   - title: The parent book title.
+ *   - menu: The top-level book links.
+ *
+ * @see template_preprocess_book_all_books_block()
+ */
+#}
+{% for book in book_menus %}
+  <nav id="book-block-menu-{{ book.id }}" class="book-block-menu" role="navigation" aria-label="{% trans %}Book outline for {{ book.title }}{% endtrans %}">
+    {{ book.menu }}
+  </nav>
+{% endfor %}

core/themes/olivero/templates/navigation/book-navigation.html.twig

@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Theme override to navigate books.
+ *
+ * Presented under nodes that are a part of book outlines.
+ *
+ * Available variables:
+ * - tree: The immediate children of the current node rendered as an unordered
+ *   list.
+ * - current_depth: Depth of the current node within the book outline. Provided
+ *   for context.
+ * - prev_url: URL to the previous node.
+ * - prev_title: Title of the previous node.
+ * - parent_url: URL to the parent node.
+ * - parent_title: Title of the parent node. Not printed by default. Provided
+ *   as an option.
+ * - next_url: URL to the next node.
+ * - next_title: Title of the next node.
+ * - has_links: Flags TRUE whenever the previous, parent or next data has a
+ *   value.
+ * - book_id: The book ID of the current outline being viewed. Same as the node
+ *   ID containing the entire outline. Provided for context.
+ * - book_url: The book/node URL of the current outline being viewed. Provided
+ *   as an option. Not used by default.
+ * - book_title: The book/node title of the current outline being viewed.
+ *
+ * @see template_preprocess_book_navigation()
+ * @see olivero_preprocess_book_navigation()
+ */
+#}
+{{ attach_library('olivero/book') }}
+{% if tree or has_links %}
+  <nav id="book-navigation-{{ book_id }}" class="book-navigation" role="navigation" aria-labelledby="book-label-{{ book_id }}">
+    {{ tree }}
+    {% if has_links %}
+      <h2 class="visually-hidden" id="book-label-{{ book_id }}">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
+      <ul class="book-pager">
+      {% if prev_url %}
+        <li class="book-pager__item book-pager__item--previous">
+          <a class="book-pager__link book-pager__link--previous" href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}">{{ prev_title }}</a>
+        </li>
+      {% endif %}
+      {% if parent_url %}
+        <li class="book-pager__item book-pager__item--center">
+          <a class="book-pager__link book-pager__link--center" href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
+        </li>
+      {% endif %}
+      {% if next_url %}
+        <li class="book-pager__item book-pager__item--next">
+          <a class="book-pager__link book-pager__link--next" href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }}</a>
+       </li>
+      {% endif %}
+    </ul>
+    {% endif %}
+  </nav>
+{% endif %}

core/themes/olivero/templates/navigation/book-tree.html.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Theme override to display a book tree.
+ *
+ * Returns HTML for a wrapper for a book sub-tree.
+ *
+ * Available variables:
+ * - items: A nested list of book items. Each book item contains:
+ *   - attributes: HTML attributes for the book item.
+ *   - below: The book item child items.
+ *   - title: The book link title.
+ *   - url: The book link URL, instance of \Drupal\Core\Url.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     book tree.
+ *   - is_collapsed: TRUE if the link has children within the current book tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+{% import _self as book_tree %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/3.x/tags/macro.html
+#}
+{{ book_tree.book_links(items, attributes, 0) }}
+
+{% macro book_links(items, attributes, menu_level) %}
+  {% import _self as book_tree %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('book-navigation__menu menu', 'menu--level-' ~ (menu_level + 1)) }}>
+    {% else %}
+      <ul class='menu menu--level-{{ menu_level + 1 }}'>
+    {% endif %}
+    {% for item in items %}
+      {%
+        set item_classes = [
+          'book-navigation__item',
+          'menu__item--level-' ~ (menu_level + 1),
+          item.is_expanded ? 'menu__item--expanded',
+          item.is_collapsed ? 'menu__item--collapsed',
+          item.in_active_trail ? 'menu__item--active-trail',
+        ]
+      %}
+      {% set link_classes = [
+          'book-navigation__link',
+          'menu__link',
+          'menu__link--link',
+          'menu__link--level-' ~ (menu_level + 1),
+          item.in_active_trail ? 'menu__link--active-trail',
+          item.below ? 'menu__link--has-children',
+        ]
+      %}
+      <li{{ item.attributes.addClass(item_classes) }}>
+        {{ link(item.title, item.url, {
+          'class': link_classes
+          })
+        }}
+        {% if item.below %}
+          {{ book_tree.book_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

core/themes/olivero/templates/navigation/breadcrumb.html.twig

@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Theme override for a breadcrumb trail.
+ *
+ * Available variables:
+ * - breadcrumb: Breadcrumb trail items.
+ */
+#}
+{% if breadcrumb %}
+  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
+    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
+    <div class="breadcrumb__content">
+      <ol class="breadcrumb__list">
+        {% for item in breadcrumb %}
+          <li class="breadcrumb__item">
+            {% if item.url %}
+              <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
+            {% else %}
+              {{ item.text }}
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ol>
+    </div>
+  </nav>
+{% endif %}

core/themes/olivero/templates/navigation/links--comment.html.twig

@@ -0,0 +1,60 @@
+{#
+/**
+ * @file
+ * Olivero's theme override for comment links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See https://juicystudio.com/article/screen-readers-display-none.php and
+ *   https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ */
+#}
+{%
+  set classes = [
+    'comment__links',
+  ]
+%}
+{% if links -%}
+  {%- if heading -%}
+    {%- if heading.level -%}
+      <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+    {%- else -%}
+      <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+    {%- endif -%}
+  {%- endif -%}
+  <ul{{ attributes.addClass(classes) }}>
+    {% for item in links %}
+      <li{{ item.attributes.addClass('comment__links-item') }}>
+        {%- if item.link -%}
+          {{ item.link }}
+        {%- elseif item.text_attributes -%}
+          <span{{ item.text_attributes }}>{{ item.text }}</span>
+        {%- else -%}
+          {{ item.text }}
+        {%- endif -%}
+      </li>
+    {% endfor %}
+  </ul>
+{%- endif %}

core/themes/olivero/templates/navigation/links.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Olivero's theme override for a set of links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See https://juicystudio.com/article/screen-readers-display-none.php and
+ *   https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ */
+#}
+{% if links -%}
+  {%- if heading -%}
+    {%- if heading.level -%}
+      <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+    {%- else -%}
+      <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+    {%- endif -%}
+  {%- endif -%}
+  <ul{{ attributes }}>
+    {% for item in links %}
+      <li{{ item.attributes }}>
+        {%- if item.link -%}
+          {{ item.link }}
+        {%- elseif item.text_attributes -%}
+          <span{{ item.text_attributes }}>{{ item.text }}</span>
+        {%- else -%}
+          {{ item.text }}
+        {%- endif -%}
+      </li>
+    {% endfor %}
+  </ul>
+{%- endif %}

core/themes/olivero/templates/navigation/menu--primary-menu.html.twig

@@ -0,0 +1,139 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for the menus in the primary_menu region.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link URL, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('olivero/navigation-primary') }}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/3.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0, 'primary-menu-item-') }}
+
+{% macro menu_links(items, attributes, menu_level, aria_id) %}
+  {% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
+  {% set drupal_selector_primary_nav_level = menu_level <= 1 ? 'primary-nav-menu--level-' ~ (menu_level + 1) : false %}
+  {% set is_top_level_menu = menu_level == 0 %}
+  {% import _self as menus %}
+  {% if items %}
+
+    {#
+      Place the menu arrow (caret) outside of the submenu because the submenu
+      has the overflow:hidden CSS rule applied.
+    #}
+    {% if menu_level == 1 %}
+      <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
+    {% endif %}
+
+    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
+      {% set attributes = attributes.removeClass(primary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'primary-nav__menu-item',
+            'primary-nav__menu-item--' ~ menu_item_type,
+            'primary-nav__menu-item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'primary-nav__menu-item--active-trail',
+            item.below ? 'primary-nav__menu-item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'primary-nav__menu-link',
+            'primary-nav__menu-link--' ~ menu_item_type,
+            'primary-nav__menu-link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'primary-nav__menu-link--active-trail',
+            item.below ? 'primary-nav__menu-link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', is_top_level_menu and item.below ? 'primary-nav-menu-item-has-children' : false) }}>
+          {#
+            A unique HTML ID should be used, but that isn't available through
+            Twig yet, so the |clean_id filter is used for now.
+            @see https://www.drupal.org/project/drupal/issues/3115445
+          #}
+          {% set aria_id = (aria_id ~ loop.index)|clean_id %}
+          {% set link_title %}
+            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-{{ menu_level + 1 }}">{{ item.title }}</span>
+          {% endset %}
+
+          {% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
+            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
+              'class': link_classes,
+              'data-drupal-selector': is_top_level_menu ? 'primary-nav-menu-link-has-children' : false,
+              })
+            }}
+
+            {% if item.below %}
+              {#
+                Aria-hidden  and tabindex attributes are removed via JS. Button is non-functional,
+                but still visible in non-JS environments so that chevron can indicate presence of
+                drop menu).
+              #}
+              {% if is_top_level_menu %}
+                {% set toggle_button_attributes = create_attribute({
+                  'class': 'primary-nav__button-toggle',
+                  'data-drupal-selector': 'primary-nav-submenu-toggle-button',
+                  'aria-controls': aria_id,
+                  'aria-expanded': 'false',
+                  'aria-hidden': 'true',
+                  'tabindex': '-1',
+                }) %}
+
+                <button{{ toggle_button_attributes }}>
+                  <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
+                  <span class="icon--menu-toggle"></span>
+                </button>
+              {% endif %}
+
+              {% set attributes = attributes.setAttribute('id', aria_id) %}
+              {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
+            {% endif %}
+
+          {% elseif menu_item_type == 'button' %}
+
+            {{ link(link_title, item.url, {
+              'class': link_classes,
+              'aria-controls': is_top_level_menu and item.below ? aria_id : false,
+              'aria-expanded': is_top_level_menu and item.below ? 'false' : false,
+              'data-drupal-selector': is_top_level_menu and item.below ? 'primary-nav-submenu-toggle-button' : false,
+            }) }}
+
+            {% set attributes = attributes.setAttribute('id', aria_id) %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig

@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for the menus in the secondary_menu region.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link URL, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('olivero/navigation-secondary') }}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/3.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% set secondary_nav_level = 'secondary-nav__menu--level-' ~ (menu_level + 1) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul{{ attributes.addClass('secondary-nav__menu', secondary_nav_level) }}>
+      {% set attributes = attributes.removeClass(secondary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'secondary-nav__menu-item',
+            'secondary-nav__menu-item--' ~ menu_item_type,
+            'secondary-nav__menu-item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
+            item.below ? 'secondary-nav__menu-item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'secondary-nav__menu-link',
+            'secondary-nav__menu-link--' ~ menu_item_type,
+            'secondary-nav__menu-link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
+            item.below ? 'secondary-nav__menu-link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes) }}>
+          {{ link(item.title, item.url, {'class': link_classes}) }}
+
+          {% if item.below %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

core/themes/olivero/templates/navigation/menu-local-task.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @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.
+ * - level: The menu level where the tab is rendered.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+<li{{ attributes.addClass('tabs__tab', is_active ? 'is-active') }}>
+  {{ link }}
+  {% if is_active and level == 'primary' %}
+    <button class="tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" aria-expanded="false">
+      <span class="tabs__trigger-icon">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+    </button>
+  {% endif %}
+</li>

core/themes/olivero/templates/navigation/menu-local-tasks.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Olivero theme implementation 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.
+ *
+ * @ingroup themeable
+ */
+#}
+
+{{ attach_library('olivero/tabs') }}
+
+{% if primary %}
+  <h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-primary-tabs>
+    <ul class="tabs tabs--primary">{{ primary }}</ul>
+  </nav>
+{% endif %}
+{% if secondary %}
+  <h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title">
+    <ul class="tabs tabs--secondary">{{ secondary }}</ul>
+  </nav>
+{% endif %}

core/themes/olivero/templates/navigation/menu.html.twig

@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for the main menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link URL, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/3.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% set primary_nav_level = 'menu--level-' ~ (menu_level + 1) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul {{ attributes.addClass('menu', primary_nav_level) }}>
+      {% set attributes = attributes.removeClass(primary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'menu__item',
+            'menu__item--' ~ menu_item_type,
+            'menu__item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'menu__item--active-trail',
+            item.below ? 'menu__item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'menu__link',
+            'menu__link--' ~ menu_item_type,
+            'menu__link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'menu__link--active-trail',
+            item.below ? 'menu__link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes) }}>
+          {#
+            A unique HTML ID should be used, but that isn't available through
+            Twig yet, so the |clean_id filter is used for now.
+            @see https://www.drupal.org/project/drupal/issues/3115445
+          #}
+          {% set aria_id = (item.title ~ '-submenu-' ~ loop.index)|clean_id %}
+
+          {{ link(item.title, item.url, {'class': link_classes}) }}
+
+          {% if item.below %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+          {% endif %}
+
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

core/themes/olivero/templates/navigation/pager.html.twig

@@ -0,0 +1,120 @@
+{#
+/**
+ * @file
+ * Theme override to display a pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - pagination_heading_level: The heading level to use for the pager.
+ * - items: List of pager items.
+ *   The list is keyed by the following elements:
+ *   - first: Item for the first page; not present on the first page of results.
+ *   - previous: Item for the previous page; not present on the first page
+ *     of results.
+ *   - next: Item for the next page; not present on the last page of results.
+ *   - last: Item for the last page; not present on the last page of results.
+ *   - pages: List of pages, keyed by page number.
+ *   Sub-sub elements:
+ *   items.first, items.previous, items.next, items.last, and each item inside
+ *   items.pages contain the following elements:
+ *   - href: URL with appropriate query parameters for the item.
+ *   - attributes: A keyed list of HTML attributes for the item.
+ *   - text: The visible text used for the item link, such as "‹ Previous"
+ *     or "Next ›".
+ * - current: The page number of the current page.
+ * - ellipses: If there are more pages than the quantity allows, then an
+ *   ellipsis before or after the listed pages may be present.
+ *   - previous: Present if the currently visible list of pages does not start
+ *     at the first page.
+ *   - next: Present if the visible list of pages ends before the last page.
+ *
+ * @see template_preprocess_pager()
+ */
+#}
+{% if items %}
+  <nav class="pager layout--content-medium" role="navigation" aria-labelledby="{{ heading_id }}">
+    <{{ pagination_heading_level }} id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</{{ pagination_heading_level }}>
+    <ul class="pager__items js-pager__items">
+      {# Print first item if we are not on the first page. #}
+      {% if items.first %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--first">
+            <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title').addClass('pager__link') }}>
+              <span class="visually-hidden">{{ 'First page'|t }}</span>
+              {% include "@olivero/../images/pager-first.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Print previous item if we are not on the first page. #}
+      {% if items.previous %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--previous">
+            <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel').addClass('pager__link') }}>
+              <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+              {% include "@olivero/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Add an ellipsis if there are further previous pages. #}
+      {% if ellipses.previous %}
+        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+
+      {# Now generate the actual pager piece. #}
+      {% for key, item in items.pages %}
+        {% apply spaceless %}
+          <li class="pager__item{{ current == key ? ' pager__item--active' : '' }} pager__item--number">
+            {% if current == key %}
+              {% set title = 'Current page'|t %}
+            {% else %}
+              {% set title = 'Go to page @key'|t({'@key': key}) %}
+            {% endif %}
+            {% if current != key %}
+              <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title').addClass('pager__link', current == key ? ' is-active') }}>
+            {% endif %}
+            <span class="visually-hidden">
+              {{ 'Page'|t }}
+            </span>
+            {{ key }}
+            {% if current != key %}
+              </a>
+            {% endif %}
+          </li>
+        {% endapply %}
+      {% endfor %}
+
+      {# Add an ellipsis if there are further next pages. #}
+      {% if ellipses.next %}
+        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+
+      {# Print next item if we are not on the last page. #}
+      {% if items.next %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--next">
+            <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel').addClass('pager__link') }}>
+              <span class="visually-hidden">{{ 'Next page'|t }}</span>
+              {% include "@olivero/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Print last item if we are not on the last page. #}
+      {% if items.last %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--last">
+            <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title').addClass('pager__link') }}>
+              <span class="visually-hidden">{{ 'Last page'|t }}</span>
+              {% include "@olivero/../images/pager-first.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}

core/themes/olivero/templates/text-format-wrapper.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for a text format-enabled form element.
+ *
+ * @todo Remove when https://www.drupal.org/node/3016346 and
+ * https://www.drupal.org/node/3016343 are fixed.
+ *
+ * Available variables:
+ * - children: Text format element children.
+ * - description: Text format element description.
+ * - attributes: HTML attributes for the containing element.
+ * - aria_description: Flag for whether or not an ARIA description has been
+ *   added to the description container.
+ * - description_attributes: attributes for the description.
+ *   @see https://www.drupal.org/node/3016343
+ * - disabled: An indicator for whether the associated form element is disabled,
+ *   added by this theme.
+ *   @see https://www.drupal.org/node/3016346
+ *
+ * @see template_preprocess_text_format_wrapper()
+ */
+#}
+{%
+  set classes = [
+    'js-form-item',
+    'form-item',
+  ]
+%}
+
+{{ attach_library('olivero/filter.theme') }}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ children }}
+  {% if description %}
+    {%
+      set description_classes = [
+        aria_description ? 'form-item__description',
+        disabled ? 'is-disabled',
+      ]
+    %}
+    <div{{ description_attributes.addClass(description_classes) }}>{{ description }}</div>
+  {% endif %}
+</div>

core/themes/olivero/templates/user/user--compact.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override to present all user data.
+ *
+ * This template is used when viewing a registered user's page,
+ * e.g., example.com/user/123. 123 being the user's ID.
+ *
+ * Available variables:
+ * - content: A list of content items. Use 'content' to print all content, or
+ *   print a subset such as 'content.field_example'. Fields attached to a user
+ *   such as 'user_picture' are available as 'content.user_picture'.
+ * - attributes: HTML attributes for the container element.
+ * - user: A Drupal User entity.
+ *
+ * @see template_preprocess_user()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {% if content %}
+    {{- content -}}
+  {% endif %}
+</div>

core/themes/olivero/templates/user/username.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Theme override for displaying a username.
+ *
+ * Available variables:
+ * - account: The full account information for the user.
+ * - uid: The user ID, or zero if not a user. As used in anonymous comments.
+ * - name: The user's name, sanitized, and optionally truncated.
+ * - name_raw: The user's name, un-truncated.
+ * - truncated: Whether the user's name was truncated.
+ * - extra: Additional text to append to the user's name, sanitized.
+ * - profile_access: Whether the current user has permission to access this
+     users profile page.
+ * - link_path: The path or URL of the user's profile page, home page,
+ *   or other desired page to link to for more information about the user.
+ * - homepage: (optional) The home page of the account, only set for non users.
+ * - link_options: Options to set on the \Drupal\Core\Url object if linking the
+ *   user's name to the user's page.
+ * - attributes: HTML attributes for the containing element.
+ *
+ * @see template_preprocess_username()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if link_path -%}
+  <a{{ attributes }}>{{ name }}{{ extra }}</a>
+{%- else -%}
+  <span{{ attributes }}>{{ name }}{{ extra }}</span>
+{%- endif -%}

core/themes/olivero/templates/views/views-mini-pager.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Theme override for a views mini-pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - pagination_heading_level: The heading level to use for the pager.
+ * - items: List of pager items.
+ *
+ * @see template_preprocess_views_mini_pager()
+ */
+#}
+{% if items.previous or items.next %}
+  <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <{{ pagination_heading_level }} id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</{{ pagination_heading_level }}>
+    <ul class="pager__items js-pager__items">
+      {# Print previous item if we are not on the first page. #}
+      {% if items.previous %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--previous">
+            <a href="{{ items.previous.href }}" class="pager__link" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel', 'class') }}>
+              <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+              {% include "@olivero/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Print current active page. #}
+      {% if items.current %}
+        <li class="pager__item pager__item--active">
+          {{ items.current }}
+        </li>
+      {% endif %}
+
+      {# Print next item if we are not on the last page. #}
+      {% if items.next %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--next">
+            <a href="{{ items.next.href }}" class="pager__link" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
+              <span class="visually-hidden">{{ 'Next page'|t }}</span>
+              {% include "@olivero/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}

core/themes/olivero/templates/views/views-view--frontpage.html.twig

@@ -0,0 +1,94 @@
+{#
+/**
+ * @file
+ * Theme override for the frontpage view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set classes = [
+    'view',
+    'view-' ~ id|clean_class,
+    'view-id-' ~ id,
+    'view-display-id-' ~ display_id,
+    'grid-full',
+    'layout--pass--content-narrow',
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if title %}
+    {{ title }}
+  {% endif %}
+  {{ title_suffix }}
+  {% if header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </div>
+  {% endif %}
+  {% if attachment_before %}
+    <div class="attachment attachment-before">
+      {{ attachment_before }}
+    </div>
+  {% endif %}
+
+  {% if rows %}
+    <div class="view-content">
+      {{ rows }}
+    </div>
+  {% elseif empty %}
+    {% include '@olivero/includes/get-started.html.twig' %}
+  {% endif %}
+
+  {% if pager %}
+    {{ pager }}
+  {% endif %}
+  {% if attachment_after %}
+    <div class="attachment attachment-after">
+      {{ attachment_after }}
+    </div>
+  {% endif %}
+  {% if more %}
+    {{ more }}
+  {% endif %}
+  {% if footer %}
+    <div class="view-footer">
+      {{ footer }}
+    </div>
+  {% endif %}
+
+</div>

core/themes/olivero/templates/views/views-view-grid.html.twig

@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override for views to display rows in a grid.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapping element.
+ * - title: The title of this group of rows.
+ * - view: The view object.
+ * - rows: The rendered view results.
+ * - options: The view plugin style options.
+ *   - row_class_default: A flag indicating whether default classes should be
+ *     used on rows.
+ *   - col_class_default: A flag indicating whether default classes should be
+ *     used on columns.
+ * - items: A list of grid items. Each item contains a list of rows or columns.
+ *   The order in what comes first (row or column) depends on which alignment
+ *   type is chosen (horizontal or vertical).
+ *   - attributes: HTML attributes for each row or column.
+ *   - content: A list of columns or rows. Each row or column contains:
+ *     - attributes: HTML attributes for each row or column.
+ *     - content: The row or column contents.
+ *
+ * @see template_preprocess_views_view_grid()
+ */
+#}
+{{ attach_library('olivero/layout-views-grid') }}
+
+{%
+  set classes = [
+    'views-view-grid',
+    'views-view-grid--' ~ options.alignment,
+  ]
+%}
+
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div{{ attributes.addClass(classes).setAttribute('style', '--views-grid--column-count: ' ~ options.columns) }}>
+  {% for row in items %}
+    {% for item in row.content %}
+      <div class="views-view-grid__item">
+        <div class="views-view-grid__item-inner">
+          {{- item.content -}}
+        </div>
+      </div>
+    {% endfor %}
+  {% endfor %}
+</div>

core/themes/olivero/templates/views/views-view-table.html.twig

@@ -0,0 +1,121 @@
+{#
+/**
+ * @file
+ * Theme override for implementation of displaying a view as a table.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ *   - class: HTML classes that can be used to style contextually through CSS.
+ * - title : The title of this group of rows.
+ * - header: The table header columns.
+ *   - attributes: Remaining HTML attributes for the element.
+ *   - content: HTML classes to apply to each header cell, indexed by
+ *   the header's key.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - caption_needed: Is the caption tag needed.
+ * - caption: The caption for this table.
+ * - accessibility_description: Extended description for the table details.
+ * - accessibility_summary: Summary for the table details.
+ * - rows: Table row items. Rows are keyed by row number.
+ *   - attributes: HTML classes to apply to each row.
+ *   - columns: Row column items. Columns are keyed by column number.
+ *     - attributes: HTML classes to apply to each column.
+ *     - content: The column content.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - responsive: A flag indicating whether table is responsive.
+ * - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
+ *
+ * @see template_preprocess_views_view_table()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'views-table',
+    'cols-' ~ header|length,
+    responsive ? 'responsive-enabled',
+    sticky ? 'sticky-header',
+  ]
+%}
+<table{{ attributes.addClass(classes) }}>
+  {% if caption_needed %}
+    <caption>
+    {% if caption %}
+      {{ caption }}
+    {% else %}
+      {{ title }}
+    {% endif %}
+    {% if (summary_element is not empty) %}
+      {{ summary_element }}
+    {% endif %}
+    </caption>
+  {% endif %}
+  {% if header %}
+    <thead>
+      <tr>
+        {% for key, column in header %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field',
+                'views-field-' ~ fields[key],
+              ]
+            %}
+          {% endif %}
+          <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+                {%- if column.url -%}
+                  <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+                {%- else -%}
+                  {{ column.content }}{{ column.sort_indicator }}
+                {%- endif -%}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {%- if column.url -%}
+                <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+              {%- else -%}
+                {{- column.content }}{{ column.sort_indicator }}
+              {%- endif -%}
+            {%- endif -%}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+  <tbody>
+    {% for row in rows %}
+      <tr{{ row.attributes }}>
+        {% for key, column in row.columns %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field'
+              ]
+            %}
+            {% for field in column.fields %}
+              {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
+            {% endfor %}
+          {% endif %}
+          <td{{ column.attributes.addClass(column_classes) }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+              {% for content in column.content %}
+                {{ content.separator }}{{ content.field_output }}
+              {% endfor %}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {% for content in column.content %}
+                {{- content.separator }}{{ content.field_output -}}
+              {% endfor %}
+            {%- endif %}
+          </td>
+        {% endfor %}
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

core/themes/olivero/templates/views/views-view.html.twig

@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override for a main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ */
+#}
+{%
+  set classes = [
+    'view',
+    'view-' ~ id|clean_class,
+    'view-id-' ~ id,
+    'view-display-id-' ~ display_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if title %}
+    {{ title }}
+  {% endif %}
+  {{ title_suffix }}
+  {% if header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </div>
+  {% endif %}
+  {% if attachment_before %}
+    <div class="attachment attachment-before">
+      {{ attachment_before }}
+    </div>
+  {% endif %}
+
+  {% if rows %}
+    <div class="view-content">
+      {{ rows }}
+    </div>
+  {% elseif empty %}
+    <div class="view-empty">
+      {{ empty }}
+    </div>
+  {% endif %}
+
+  {% if pager %}
+    {{ pager }}
+  {% endif %}
+  {% if attachment_after %}
+    <div class="attachment attachment-after">
+      {{ attachment_after }}
+    </div>
+  {% endif %}
+  {% if more %}
+    {{ more }}
+  {% endif %}
+  {% if footer %}
+    <div class="view-footer">
+      {{ footer }}
+    </div>
+  {% endif %}
+  {% if feed_icons %}
+    <div class="feed-icons">
+      {{ feed_icons }}
+    </div>
+  {% endif %}
+</div>