values-add-data-color-id-attribute.diff

diff --git a/assets/controllers/color-square_controller.js b/assets/controllers/color-square_controller.js
index 008ca90..d367d92 100644
--- a/assets/controllers/color-square_controller.js
+++ b/assets/controllers/color-square_controller.js
@@ -7,6 +7,8 @@ export default class extends Controller {
 
     connect() {
         this.selectTarget.classList.add('d-none');
+
+        console.log(this.element.dataset.colorId);
     }
 
     selectColor(event) {
diff --git a/templates/product/_cart_add_controls.html.twig b/templates/product/_cart_add_controls.html.twig
index 6224146..5addac0 100644
--- a/templates/product/_cart_add_controls.html.twig
+++ b/templates/product/_cart_add_controls.html.twig
@@ -2,7 +2,10 @@
     attr: { class: 'cart-add-controls d-flex align-items-center justify-content-baseline' }
 }) }}
     {% if addToCartForm.color is defined %}
-        <div data-controller="color-square">
+        <div
+            data-controller="color-square"
+            data-color-id="{{ addToCartForm.vars.data.product.colors[1].id }}"
+        >
             {{ form_widget(addToCartForm.color, {
                 attr: { 'data-color-square-target': 'select' }
             }) }}