Shopify metaobject swatches on product page

gistfile1.txt

<fieldset class="radio__fieldset" style="margin-bottom: 12px;">
    <legend class="radio__legend" aria-label="{{ 'home_page.onboarding.color' | t }}">
    <span class="radio__legend__label">{{ 'home_page.onboarding.color' | t }}</span>
    </legend>
    {% for color_item in product.metafields.shopify.color-pattern.value %}
        {% if color_item %}
        <radio-swatch class="swatch__button{% if settings.swatches_squares %} swatch__button--square{% endif %}">
            <label {% if color_item.color != null %} data-swatch style="--swatch: {{ color_item.color }}"{% endif %}>
                {% if color_item.image %}
                    {% render 'image', img_object: color_item.image.value, width: 34, wh_ratio: 1 %}
                {% endif %}
                <span class="visually-hidden value">{{ color_item.label | downcase }}</span>
            </label>
        </radio-swatch>
        {% endif %}
    {% endfor %}
</fieldset>

gistfile2.txt

{% assign color_item = product.metafields.shopify.color-pattern.value | first %}
{% if color_item %}
<fieldset class="radio__fieldset" style="margin-bottom: 12px;">
    <legend class="radio__legend" aria-label="{{ 'home_page.onboarding.color' | t }}">
    <span class="radio__legend__label">{{ 'home_page.onboarding.color' | t }}</span>
    <span data-option-value="" data-swapper-target="">{{ color_item.label }}</span>
    </legend>
    <radio-swatch class="swatch__button{% if settings.swatches_squares %} swatch__button--square{% endif %}">
        <label {% if color_item.color != null %} data-swatch style="--swatch: {{ color_item.color }}"{% endif %}>
            {% if color_item.image %}
                {% render 'image', img_object: color_item.image.value, width: 34, wh_ratio: 1 %}
            {% endif %}
            <span class="visually-hidden value">{{ color_item.label | downcase }}</span>
        </label>
    </radio-swatch>
</fieldset>
{% endif %}