Add color attr

settings_schema.json

  {
  "name": "Color Settings",
    "settings": [
        {
        "type": "metaobject_list",
        "metaobject_type": "color_old_product",
        "id": "color_mapping",
        "label": "Color Mapping"
      }
    ]
  },


product-variant-options-card.liquid
 
<!-- /** THANH CUSTOM ****/ -->
{% assign color_mapping = settings.color_mapping %}
{% assign current_value = value %}

{% if color_mapping != blank %}
  {% assign matched_color = "" %}
  {% for color_item in color_mapping %}
    {% if color_item.name == current_value %}
      {% assign matched_color = color_item.color_code %}
      <span data-title="{{ color_item.name }}" class="color-custom" style="background-color:{{ matched_color }}">  </span>
    {% endif %}
  {% endfor %}

  {% if matched_color == "" %}
    {% assign matched_color = "#fff" %} 
    <span data-title="Default Color" class="color-custom-no-matched color-custom" style="background-color:{{ matched_color }}">  </span>
  {% endif %}
{% endif %}
<!-- /** THANH CUSTOM ****/ -->    
css 

/*** CUSTOM COLOR ***/
.card-swatch .color-custom {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}
.color-custom {
  position: relative;
  display: inline-block; /* Ensure the element occupies space */
}
.color-custom:hover::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  font-size: 12px;
  z-index: 10;
  pointer-events: none; /* Prevent interference with mouse events */
}
.color-custom::after {
  content: ""; /* Default empty content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
span.color-custom-no-matched.color-custom {
    border: 1px solid #fff;
}

/*** CUSTOM COLOR ***/