I need to display a field value available to `paragraph.html.twig` in `field.html.twig`.
I have a paragraph type called `buttoncontainer` with a field name called `field_background_color`. I have a paragraph type called `button` nested within that as per the attached screenshot. I need to make the `field_background_color` value available to `field.html.twig`.

Let's say `field_background_color` equates to `#333333`

In `field.html.twig` I want to do something like:

```
<div style="background: {{ color }};">
    {% for item in items %}
        {{ item.content }} 
    {% endfor %}
</div>  
```

Is this something that can be done with a preprocess function?

I tried

```
function mysubtheme_preprocess_paragraph(&$variables) {

  $paragraph = $variables['paragraph'];

  if ($paragraph->getType() === 'sidebar_button_repeater') {
    if (!$paragraph->field_background_color->isEmpty()) {
      $variables['color'] = $paragraph->get('field_background_color')->first()->getValue();
    }
  }
} 
```
...but it won't output the value in `field.html.twig`. The goal is simply to allow the user to determine the div background color behind the buttons they create.


Update:
I tried this contributed preprocess function (changed mysubtheme to the relevant theme name btw)
```
use Drupal\paragraphs\ParagraphInterface;

function mysubtheme_preprocess_field(&$variables) {

  $paragraph = $variables['element']['#object'];
  if ($paragraph instanceof ParagraphInterface) {
    if ($paragraph->getType() === 'sidebar_button_repeater') {
      if (!$paragraph->field_background_color->isEmpty()) {
        $variables['color'] = $paragraph->get('field_background_color')->value;
      }
    }
  }

} 
```

also tried

```
use Drupal\paragraphs\ParagraphInterface;
function fletcher_preprocess_field(&$variables) {
  $paragraph = $variables['element']['#object'];
  if ($paragraph instanceof ParagraphInterface) {
    if ($paragraph->getType() === 'sidebar_button') {
      $parent = $paragraph->getParentEntity();
      if ($parent instanceof ParagraphInterface) {     
        if ($parent->getType() === 'sidebar_button_repeater') {
          if (!$parent->field_background_color->isEmpty()) {
            $variables['color2'] = $parent->get('field_background_color')->value;
          }
        }
      }
    }
  }

}
```

and added `Color = {{ color }}` specifically to  my `field.html.twig` template but got no output for `{{ color }}` unfortunately.

I also added:
```
 {% set paragraph_parent = paragraph.getParentEntity() %}
{% set color = paragraph_parent.field_background_color.0.value %}
Color  is {{ color }}. 
```
...but that doesn't work in `field.html.twig` either. It does however work in `paragraph.html.twig` templates.

I found a very useful link at https://drupal.stackexchange.com/questions/233977/access-a-referenced-nodes-fields-field-level-templating#answer-233992  that may inform a change to the code. Maybe syntax using `item`? I can return the NESTED paragraph field values using `{{ item.content['#node'].field_background_color.value }}` but I can't return the PARENT paragraph field value. 

My specific version of `field.html.twig` file is `field--paragraph--sidebar-button-repeater.html.twig` and `{{ item.content }}` does natively output the parent field `field_background_color` value (see img). The problem is how to capture that specific value so I can use it in a situation like: `<div style="background: [output from field_background_color ];">` in `field--paragraph--sidebar-button-repeater.html.twig`. I was hoping some iteration of `{{ item.content['#node'].field_background_color.value }}` would achieve it. Can some parent parameter be added to capture the field value? 

Here's my `field--paragraph--sidebar-button-repeater.html.twig` code. With the preprocessor function above in mind am I missing anything in `set` to output `{{ color }}`

```
{#
/**
 * @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,
  ]
%}

Color is {{ color }} 

    {% for item in items %}
        {{ item.content }}
    {% endfor %}

```


[![enter image description here][1]][1]

[![enter image description here][2]][2]


  [1]: https://i.sstatic.net/4YzPs.png
  [2]: https://i.sstatic.net/eeCsD.png