fix(ld-bg-cells): switch layers for bg-cells to avoid unnecessary col…

…or reassignment

screenshot/builds/master.json

@@ -461,7 +461,7 @@
     },
     {
       "id": "61224c7a",
-      "image": "7d978dc0cc8fd0a3195eb18113f8f8bb.png",
+      "image": "852dd5c2d258277282cac6578ac39230.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component default",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -474,7 +474,7 @@
     },
     {
       "id": "ded32eec",
-      "image": "9653146a28acf8d0be07db504f9393ed.png",
+      "image": "6a7ab48156e1e15a83e3d2989d8f745b.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type bioreliance",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -487,7 +487,7 @@
     },
     {
       "id": "e70495e8",
-      "image": "c0fb630a7392e78db9df6aa7244c1ce7.png",
+      "image": "61e32cbddbe3a74dfb5cbbe173468d1b.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type f",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -500,7 +500,7 @@
     },
     {
       "id": "98f79641",
-      "image": "7d978dc0cc8fd0a3195eb18113f8f8bb.png",
+      "image": "852dd5c2d258277282cac6578ac39230.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type hexagon",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -513,7 +513,7 @@
     },
     {
       "id": "557d96f5",
-      "image": "7fc4f56f0ca524117aababcde98312b9.png",
+      "image": "c078b9c098c33341b8d7f362d88fee79.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type millipore",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -526,7 +526,7 @@
     },
     {
       "id": "3fd0f934",
-      "image": "d102a78e5cad455a940c1cebd90e47ac.png",
+      "image": "a81cece633d9312b2e7da25e00d9edb6.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type milliq",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -539,7 +539,7 @@
     },
     {
       "id": "f14e54a0",
-      "image": "63ed12060e7cbbe1433e4748830e97cf.png",
+      "image": "9b7e5dd74d84451e0da13c17959503a3.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type o",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -552,7 +552,7 @@
     },
     {
       "id": "441aa8fe",
-      "image": "25d0f9d2b04fd27eccee9ed5891d789a.png",
+      "image": "081d338901f13e4ad5a3628659dd09c3.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type safc",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -565,7 +565,7 @@
     },
     {
       "id": "dd5b7473",
-      "image": "701422d303b0c600d70409afbae9aede.png",
+      "image": "c00ae6362eda45f31c946ad5ed138793.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type sigma-aldrich",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -578,7 +578,7 @@
     },
     {
       "id": "78bc0075",
-      "image": "710976bb422a6a40ebd726142e6575c0.png",
+      "image": "d4b0b38c88191791be351dd81d604dfa.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type supelco",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -591,7 +591,7 @@
     },
     {
       "id": "b83633d8",
-      "image": "62237c0c5f6441e32daad1705865f118.png",
+      "image": "c6c9c1a284b05d45b147b0b74629ea08.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type t",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -604,7 +604,7 @@
     },
     {
       "id": "be4f2648",
-      "image": "929bf52d26a102d9429d9728fe1c4b98.png",
+      "image": "b29e1e4fc16b9a067abd354531bdfa68.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component type tile",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -617,7 +617,7 @@
     },
     {
       "id": "a028332f",
-      "image": "cc45891d1e6bb6ba5f4985e02d9eed9b.png",
+      "image": "8ac09474993668b8e94b01a6e2061115.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component with custom css vars",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -630,7 +630,7 @@
     },
     {
       "id": "9585448e",
-      "image": "55ae81877e5c33289f67773ed61124f3.png",
+      "image": "abb9c502d6d61879cc4ec94af1d023d7.png",
       "userAgent": "default",
       "desc": "ld-bg-cells css component with three layers",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -643,7 +643,7 @@
     },
     {
       "id": "d4180b1a",
-      "image": "7d978dc0cc8fd0a3195eb18113f8f8bb.png",
+      "image": "852dd5c2d258277282cac6578ac39230.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component default",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -656,7 +656,7 @@
     },
     {
       "id": "13ac6905",
-      "image": "9653146a28acf8d0be07db504f9393ed.png",
+      "image": "6a7ab48156e1e15a83e3d2989d8f745b.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type bioreliance",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -669,7 +669,7 @@
     },
     {
       "id": "faa21405",
-      "image": "c0fb630a7392e78db9df6aa7244c1ce7.png",
+      "image": "61e32cbddbe3a74dfb5cbbe173468d1b.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type f",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -682,7 +682,7 @@
     },
     {
       "id": "b2400420",
-      "image": "7d978dc0cc8fd0a3195eb18113f8f8bb.png",
+      "image": "852dd5c2d258277282cac6578ac39230.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type hexagon",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -695,7 +695,7 @@
     },
     {
       "id": "89d83327",
-      "image": "7fc4f56f0ca524117aababcde98312b9.png",
+      "image": "c078b9c098c33341b8d7f362d88fee79.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type millipore",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -708,7 +708,7 @@
     },
     {
       "id": "3941963b",
-      "image": "d102a78e5cad455a940c1cebd90e47ac.png",
+      "image": "a81cece633d9312b2e7da25e00d9edb6.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type milliq",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -721,7 +721,7 @@
     },
     {
       "id": "43dbca1f",
-      "image": "63ed12060e7cbbe1433e4748830e97cf.png",
+      "image": "9b7e5dd74d84451e0da13c17959503a3.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type o",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -734,7 +734,7 @@
     },
     {
       "id": "d7796855",
-      "image": "25d0f9d2b04fd27eccee9ed5891d789a.png",
+      "image": "081d338901f13e4ad5a3628659dd09c3.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type safc",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -747,7 +747,7 @@
     },
     {
       "id": "344b18f6",
-      "image": "701422d303b0c600d70409afbae9aede.png",
+      "image": "c00ae6362eda45f31c946ad5ed138793.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type sigma-aldrich",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -760,7 +760,7 @@
     },
     {
       "id": "6802b6e4",
-      "image": "710976bb422a6a40ebd726142e6575c0.png",
+      "image": "d4b0b38c88191791be351dd81d604dfa.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type supelco",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -773,7 +773,7 @@
     },
     {
       "id": "c82fadbe",
-      "image": "62237c0c5f6441e32daad1705865f118.png",
+      "image": "c6c9c1a284b05d45b147b0b74629ea08.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type t",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -786,7 +786,7 @@
     },
     {
       "id": "45a6e6c9",
-      "image": "929bf52d26a102d9429d9728fe1c4b98.png",
+      "image": "b29e1e4fc16b9a067abd354531bdfa68.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component type tile",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",
@@ -799,7 +799,7 @@
     },
     {
       "id": "0229b96c",
-      "image": "cc45891d1e6bb6ba5f4985e02d9eed9b.png",
+      "image": "8ac09474993668b8e94b01a6e2061115.png",
       "userAgent": "default",
       "desc": "ld-bg-cells web component with custom css vars",
       "testPath": "./src/liquid/components/ld-bg-cells/test/ld-bg-cells.e2e.ts",

src/liquid/components/ld-bg-cells/ld-bg-cells.css

@@ -33,14 +33,14 @@
 .ld-bg-cells {
   :host(&--three-layers),
   &--three-layers {
-    --ld-bg-cells-layer-col: var(--ld-col-vy);
-    --ld-bg-cells-secondary-layer-col: var(--ld-thm-primary);
-    --ld-bg-cells-layer-size: 580%;
-    --ld-bg-cells-layer-translation-x: -20%;
-    --ld-bg-cells-layer-translation-y: -100%;
-    --ld-bg-cells-secondary-layer-size: 390%;
-    --ld-bg-cells-secondary-layer-translation-x: -50%;
-    --ld-bg-cells-secondary-layer-rotation: -30deg;
+    --ld-bg-cells-layer-col: var(--ld-thm-primary);
+    --ld-bg-cells-secondary-layer-col: var(--ld-col-vy);
+    --ld-bg-cells-layer-size: 390%;
+    --ld-bg-cells-layer-translation-x: -50%;
+    --ld-bg-cells-layer-rotation: -30deg;
+    --ld-bg-cells-secondary-layer-size: 580%;
+    --ld-bg-cells-secondary-layer-translation-x: -20%;
+    --ld-bg-cells-secondary-layer-translation-y: -100%;
   }
 
   :host(&--bioreliance),

src/liquid/components/ld-bg-cells/ld-bg-cells.tsx

@@ -62,15 +62,15 @@ export class LdBgCells {
         ])}
       >
         <div
-          class="ld-bg-cells__layer"
-          part="layer"
+          class="ld-bg-cells__secondary-layer"
+          part="secondary-layer"
           style={{
             '--ld-bg-cells-image': `url(${assetPath})`,
           }}
         ></div>
         <div
-          class="ld-bg-cells__secondary-layer"
-          part="secondary-layer"
+          class="ld-bg-cells__layer"
+          part="layer"
           style={{
             '--ld-bg-cells-image': `url(${assetPath})`,
           }}

src/liquid/components/ld-bg-cells/test/__snapshots__/ld-bg-cells.spec.ts.snap

@@ -3,35 +3,35 @@
 exports[`ld-bg-cells renders default 1`] = `
 <ld-bg-cells class="ld-bg-cells ld-bg-cells--hexagon">
   <mock:shadow-root>
-    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
     <div class="ld-bg-cells__secondary-layer" part="secondary-layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
+    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
   </mock:shadow-root>
 </ld-bg-cells>
 `;
 
 exports[`ld-bg-cells renders with alias type 1`] = `
 <ld-bg-cells class="ld-bg-cells ld-bg-cells--supelco" type="qa-x2f-qc">
   <mock:shadow-root>
-    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/supelco-cell.svg);"></div>
     <div class="ld-bg-cells__secondary-layer" part="secondary-layer" style="--ld-bg-cells-image: url(/assets/supelco-cell.svg);"></div>
+    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/supelco-cell.svg);"></div>
   </mock:shadow-root>
 </ld-bg-cells>
 `;
 
 exports[`ld-bg-cells renders with explicit type 1`] = `
 <ld-bg-cells class="ld-bg-cells ld-bg-cells--millipore" type="millipore">
   <mock:shadow-root>
-    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/millipore-cell.svg);"></div>
     <div class="ld-bg-cells__secondary-layer" part="secondary-layer" style="--ld-bg-cells-image: url(/assets/millipore-cell.svg);"></div>
+    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/millipore-cell.svg);"></div>
   </mock:shadow-root>
 </ld-bg-cells>
 `;
 
 exports[`ld-bg-cells renders with three layers 1`] = `
 <ld-bg-cells class="ld-bg-cells ld-bg-cells--hexagon ld-bg-cells--three-layers" three-layers="">
   <mock:shadow-root>
-    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
     <div class="ld-bg-cells__secondary-layer" part="secondary-layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
+    <div class="ld-bg-cells__layer" part="layer" style="--ld-bg-cells-image: url(/assets/hexagon-cell.svg);"></div>
   </mock:shadow-root>
 </ld-bg-cells>
 `;