Start with default generated template

templates/field/field--comment.html.twig

@@ -0,0 +1,57 @@
+{#
+/**
+ * @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_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()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    'comment-wrapper',
+  ]
+%}
+{%
+  set title_classes = [
+    'title',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<section{{ attributes.addClass(classes) }}>
+  {% if comments and not label_hidden %}
+    {{ title_prefix }}
+    <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
+    {{ title_suffix }}
+  {% endif %}
+
+  {{ comments }}
+
+  {% if comment_form %}
+    <h2 class="title comment-form__title">{{ 'Add new comment'|t }}</h2>
+    {{ comment_form }}
+  {% endif %}
+
+</section>

templates/field/field--node--created.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for the node created field.
+ *
+ * This is an override of field.html.twig for the node created field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item 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.
+ * - is_inline: If false, display an ordinary field.
+ *   If true, display an inline format, suitable for inside elements such as
+ *   <span>, <h2> and so on.
+ *
+ * @see field.html.twig
+ * @see node_preprocess_field__node()
+ *
+ * @todo Delete as part of https://www.drupal.org/node/3015623
+ */
+#}
+{% if not is_inline %}
+  {% include "field.html.twig" %}
+{% else %}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
+{% endif %}

templates/field/field--node--title.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for the node title field.
+ *
+ * This is an override of field.html.twig for the node title field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item 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.
+ * - is_inline: If false, display an ordinary field.
+ *   If true, display an inline format, suitable for inside elements such as
+ *   <span>, <h2> and so on.
+ *
+ * @see field.html.twig
+ * @see node_preprocess_field__node()
+ *
+ * @todo Delete as part of https://www.drupal.org/node/3015623
+ */
+#}
+{% if not is_inline %}
+  {% include "field.html.twig" %}
+{% else %}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
+{% endif %}

templates/field/field--node--uid.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for the node user field.
+ *
+ * This is an override of field.html.twig for the node user field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item 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.
+ * - is_inline: If false, display an ordinary field.
+ *   If true, display an inline format, suitable for inside elements such as
+ *   <span>, <h2> and so on.
+ *
+ * @see field.html.twig
+ * @see node_preprocess_field__node()
+ *
+ * @todo Delete as part of https://www.drupal.org/node/3015623
+ */
+#}
+{% if not is_inline %}
+  {% include "field.html.twig" %}
+{% else %}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
+{% endif %}

templates/field/field--text-long.html.twig

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

templates/field/field--text-with-summary.html.twig

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

templates/field/field--text.html.twig

@@ -0,0 +1,28 @@
+{% extends "field.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation 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
+ *
+ * A 'text-formatted' class is added to assist with default styling of base
+ * elements such as paragraphs and lists that may not have classes assigned to
+ * them. This allows user entered content to have default styling without
+ * interfering with the styles of other UI components such as system generated
+ * lists or other dynamic content.
+ *
+ * @see https://www.drupal.org/node/2539860
+ *
+ * @ingroup themeable
+ */
+#}
+{% set attributes = attributes.addClass('clearfix', 'text-formatted') %}

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 %}

templates/field/file-audio.html.twig

@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as an audio tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   audio tag.
+* - files: And array of files to be added as sources for the audio tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('aaron/file') }}
+<audio {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</audio>

templates/field/file-link.html.twig

@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Theme override for a link to a file.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for the containing element.
+ * - link: A link to the file.
+ * - icon: The icon image representing the file type.
+ * - file_size: The size of the file.
+ *
+ * @see template_preprocess_file_link()
+ */
+#}
+{{ attach_library('aaron/file') }}
+<span{{ attributes }}>{{ icon }} {{ link }}</span>

templates/field/file-video.html.twig

@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('aaron/file') }}
+<video {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>

templates/field/image-formatter.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override to display a formatted image field.
+ *
+ * Available variables:
+ * - image: A collection of image data.
+ * - image_style: An optional image style.
+ * - url: An optional URL the image can be linked to.
+ *
+ * @see template_preprocess_image_formatter()
+ */
+#}
+{% if url %}
+  {{ link(image, url) }}
+{% else %}
+  {{ image }}
+{% endif %}

templates/field/image-style.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override for an image using a specific image style.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the image, including the following:
+ *   - src: Full URL or relative path to the image file.
+ *   - class: One or more classes to be applied to the image.
+ *   - width: The width of the image (if known).
+ *   - height: The height of the image (if known).
+ *   - title: The title of the image.
+ *   - alt: The alternative text for the image.
+ *
+ * @see template_preprocess_image_style()
+ */
+#}
+{{ image }}

templates/field/image.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ */
+#}
+{%
+set classes = [
+  style_name ? 'image-style-' ~ style_name|clean_class,
+]
+%}
+<img{{ attributes.addClass(classes) }} />

templates/field/link-formatter-link-separate.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override of a link with separate title and URL elements.
+ *
+ * Available variables:
+ * - link: The link that has already been formatted by l().
+ * - title: (optional) A descriptive or alternate title for the link, which may
+ *   be different than the actual link text.
+ *
+ * @see template_preprocess_link_formatter_link_separate()
+ */
+#}
+<div class="link-item">
+  {%- if title -%}
+    <div class="link-title">{{- title -}}</div>
+  {%- endif -%}
+  <div class="link-url">{{- link -}}</div>
+</div>

templates/field/time.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for a date / time element.
+ *
+ * Available variables
+ * - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the
+ *   datetime cannot be represented as a UNIX timestamp, use a valid datetime
+ *   attribute value in attributes.datetime.
+ * - text: (optional) The content to display within the <time> element.
+ *   Defaults to a human-readable representation of the timestamp value or the
+ *   datetime attribute value using DateFormatter::format().
+ * - attributes: (optional) HTML attributes to apply to the <time> element.
+ *   A datetime attribute in 'attributes' overrides the 'timestamp'. To
+ *   create a valid datetime attribute value from a UNIX timestamp, use
+ *   DateFormatter::format() with one of the predefined 'html_*' formats.
+ *
+ * @see \Drupal\Core\Datetime\DatePreprocess::preprocessTime()
+ * @see https://www.w3.org/TR/html5-author/the-time-element.html#attr-time-datetime
+ */
+#}
+<time{{ attributes.addClass('datetime') }}>{{ text }}</time>