fix: 1.0rem safari issue

* fix: 1.0rem safari issue * Merge remote-tracking branch 'origin/feat/theming' into fix/units_for_safari * test: update visual regression tests
emdgroup-liquid · Nov 9, 2021 · 3b2bbfe · 3b2bbfe
1 parent 608feac
commit 3b2bbfe
Show file tree

Hide file tree

Showing 108 changed files with 270 additions and 264 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
diff --git a/...ages/e5b1a1f24a093f8c8cddca8a0e65eacc.png → ...ages/00430d23cc3fc1ca13e629cc24513e8e.png b/...ages/e5b1a1f24a093f8c8cddca8a0e65eacc.png → ...ages/00430d23cc3fc1ca13e629cc24513e8e.png
diff --git a/screenshot/images/0248feedbc8245adddc1deb824d7c8f2.png b/screenshot/images/0248feedbc8245adddc1deb824d7c8f2.png
diff --git a/screenshot/images/054396ab582784c217ced08a6a2d195f.png b/screenshot/images/054396ab582784c217ced08a6a2d195f.png
diff --git a/...ages/64995501a601c28f0f7b6bf455969000.png → ...ages/063d02dbbe39bbf72362551fd4c2a063.png b/...ages/64995501a601c28f0f7b6bf455969000.png → ...ages/063d02dbbe39bbf72362551fd4c2a063.png
diff --git a/...ages/cd77f2f7945114168fcd9bd236c2ad86.png → ...ages/08aacd4deb944dd6aec8905aa913b813.png b/...ages/cd77f2f7945114168fcd9bd236c2ad86.png → ...ages/08aacd4deb944dd6aec8905aa913b813.png
diff --git a/screenshot/images/08add4160550304134136fa7224931bb.png b/screenshot/images/08add4160550304134136fa7224931bb.png
diff --git a/screenshot/images/0c9d48ed0a61bfa39109710d65c15c59.png b/screenshot/images/0c9d48ed0a61bfa39109710d65c15c59.png
diff --git a/screenshot/images/0d5b0ab73a82b2b6ce48c57e3191045a.png b/screenshot/images/0d5b0ab73a82b2b6ce48c57e3191045a.png
diff --git a/screenshot/images/11a9d8724c8853f5ec454096d31481f0.png b/screenshot/images/11a9d8724c8853f5ec454096d31481f0.png
diff --git a/screenshot/images/122fd790c5120321d870eaf5a298eb4b.png b/screenshot/images/122fd790c5120321d870eaf5a298eb4b.png
diff --git a/screenshot/images/1237dffcde3595b099e8dcbe8baef10f.png b/screenshot/images/1237dffcde3595b099e8dcbe8baef10f.png
diff --git a/screenshot/images/1332d681357568918945e1a369d70f7f.png b/screenshot/images/1332d681357568918945e1a369d70f7f.png
diff --git a/screenshot/images/146c18c58ba9e9dc3417a27e99bab7c0.png b/screenshot/images/146c18c58ba9e9dc3417a27e99bab7c0.png
diff --git a/screenshot/images/1492d032b4a6f7377e91dd62d61516a2.png b/screenshot/images/1492d032b4a6f7377e91dd62d61516a2.png
diff --git a/screenshot/images/172ce26a7409a2fbdd2d81b129771e23.png b/screenshot/images/172ce26a7409a2fbdd2d81b129771e23.png
diff --git a/screenshot/images/23576d8f025dc1d1110d6394b4a4ea4e.png b/screenshot/images/23576d8f025dc1d1110d6394b4a4ea4e.png
diff --git a/screenshot/images/240a07d9ab3013f9d71ed13eb03b7da5.png b/screenshot/images/240a07d9ab3013f9d71ed13eb03b7da5.png
diff --git a/screenshot/images/24f869623acd00ec04700370b18cde68.png b/screenshot/images/24f869623acd00ec04700370b18cde68.png
diff --git a/screenshot/images/290439b17375388d41594408df11532e.png b/screenshot/images/290439b17375388d41594408df11532e.png
diff --git a/screenshot/images/2a1270ce771c5b4fe6d91bf1c6c53574.png b/screenshot/images/2a1270ce771c5b4fe6d91bf1c6c53574.png
diff --git a/screenshot/images/2bf16778e39e0b2b169708663a8d6542.png b/screenshot/images/2bf16778e39e0b2b169708663a8d6542.png
diff --git a/screenshot/images/341b699351c19696f5c40b6e795a971c.png b/screenshot/images/341b699351c19696f5c40b6e795a971c.png
diff --git a/screenshot/images/34bca4c4d32a773105c3eeb7f680a755.png b/screenshot/images/34bca4c4d32a773105c3eeb7f680a755.png
diff --git a/screenshot/images/36d00bc6508a05210138512a7e650ea4.png b/screenshot/images/36d00bc6508a05210138512a7e650ea4.png
diff --git a/...ages/fc4259db7e1dc6b1517225303c6f53c8.png → ...ages/46bbe33ceef3e5dccbcd5a848476129d.png b/...ages/fc4259db7e1dc6b1517225303c6f53c8.png → ...ages/46bbe33ceef3e5dccbcd5a848476129d.png
diff --git a/screenshot/images/499d5fd6bb0dd888f1859230972f3b98.png b/screenshot/images/499d5fd6bb0dd888f1859230972f3b98.png
diff --git a/...ages/d00219216105cd45e34662210278f89e.png → ...ages/4b35d193ebe73a13913f0a1caa82d6ba.png b/...ages/d00219216105cd45e34662210278f89e.png → ...ages/4b35d193ebe73a13913f0a1caa82d6ba.png
diff --git a/screenshot/images/4ca76b9a4a03565e7cfb12dcc73712de.png b/screenshot/images/4ca76b9a4a03565e7cfb12dcc73712de.png
diff --git a/screenshot/images/4d4c79242845f6b7e2338e9996c18d31.png b/screenshot/images/4d4c79242845f6b7e2338e9996c18d31.png
diff --git a/screenshot/images/520def9285ea61e6b35ce84d629957b1.png b/screenshot/images/520def9285ea61e6b35ce84d629957b1.png
diff --git a/screenshot/images/57b5ff9423f40e4e2d137a2f088be81a.png b/screenshot/images/57b5ff9423f40e4e2d137a2f088be81a.png
diff --git a/screenshot/images/58ec53299e6603e824cb462f1202caa8.png b/screenshot/images/58ec53299e6603e824cb462f1202caa8.png
diff --git a/screenshot/images/5abe6eb653e3eaf223c30eab07690f32.png b/screenshot/images/5abe6eb653e3eaf223c30eab07690f32.png
diff --git a/screenshot/images/5bc91394ef3a47831293745b6167225a.png b/screenshot/images/5bc91394ef3a47831293745b6167225a.png
diff --git a/screenshot/images/5c06fc911b9a0c5dc1fea1eee3333a3e.png b/screenshot/images/5c06fc911b9a0c5dc1fea1eee3333a3e.png
diff --git a/screenshot/images/5da2a28f102f6b7c9b2d9a5d84b3951f.png b/screenshot/images/5da2a28f102f6b7c9b2d9a5d84b3951f.png
diff --git a/screenshot/images/615c2f02bb56cddce745af6e3b6b2a55.png b/screenshot/images/615c2f02bb56cddce745af6e3b6b2a55.png
diff --git a/screenshot/images/642ab7a77312248229ccf729d71a3dc5.png b/screenshot/images/642ab7a77312248229ccf729d71a3dc5.png
diff --git a/screenshot/images/6b7efcf8b9ff261c299a8c98cc055c18.png b/screenshot/images/6b7efcf8b9ff261c299a8c98cc055c18.png
diff --git a/screenshot/images/6c089bd459432703fcb4a1b68145e30d.png b/screenshot/images/6c089bd459432703fcb4a1b68145e30d.png
diff --git a/screenshot/images/6d0f058d3a87bbe01a31a7549d52ce3b.png b/screenshot/images/6d0f058d3a87bbe01a31a7549d52ce3b.png
diff --git a/screenshot/images/6fdcee863e110a475036bfb482a2d3bc.png b/screenshot/images/6fdcee863e110a475036bfb482a2d3bc.png
diff --git a/screenshot/images/70155ff39f8c32830ff36d2ce6e5c815.png b/screenshot/images/70155ff39f8c32830ff36d2ce6e5c815.png
diff --git a/screenshot/images/7090f9da8d38f7e02ec7077656a9e05d.png b/screenshot/images/7090f9da8d38f7e02ec7077656a9e05d.png
diff --git a/screenshot/images/70a8a7e1d57e2e66b3eec843e986d4e0.png b/screenshot/images/70a8a7e1d57e2e66b3eec843e986d4e0.png
diff --git a/screenshot/images/7353dcb9157a20b2e2f5acfb21b255d8.png b/screenshot/images/7353dcb9157a20b2e2f5acfb21b255d8.png
diff --git a/screenshot/images/7528f1d3f2a907df682bee95bd23daba.png b/screenshot/images/7528f1d3f2a907df682bee95bd23daba.png
diff --git a/screenshot/images/7870c812969ea1835f199cba03812ab9.png b/screenshot/images/7870c812969ea1835f199cba03812ab9.png
diff --git a/screenshot/images/7b6419f080969bf6cacb80f0b087f317.png b/screenshot/images/7b6419f080969bf6cacb80f0b087f317.png
diff --git a/screenshot/images/7f9efa6a22989bda52bd43317b249a9a.png b/screenshot/images/7f9efa6a22989bda52bd43317b249a9a.png
diff --git a/screenshot/images/80c0651415bc5287d3399515b17d3e02.png b/screenshot/images/80c0651415bc5287d3399515b17d3e02.png
diff --git a/screenshot/images/8110f319a50a013834d1ae92d0f4d71c.png b/screenshot/images/8110f319a50a013834d1ae92d0f4d71c.png
diff --git a/screenshot/images/848ea83b261b2fa699bcca9ebdd110ca.png b/screenshot/images/848ea83b261b2fa699bcca9ebdd110ca.png
diff --git a/screenshot/images/87b1039c69c26622b27219780351a324.png b/screenshot/images/87b1039c69c26622b27219780351a324.png
diff --git a/screenshot/images/87de8f9d6d35d13600eef0b25d057bc2.png b/screenshot/images/87de8f9d6d35d13600eef0b25d057bc2.png
diff --git a/screenshot/images/8b21dbd45e452be0fc6a01859c56564b.png b/screenshot/images/8b21dbd45e452be0fc6a01859c56564b.png
diff --git a/screenshot/images/8c3927d95a3d07a696c4744a290a4aaf.png b/screenshot/images/8c3927d95a3d07a696c4744a290a4aaf.png
diff --git a/screenshot/images/8db92bc449fd8303e6c575878277f739.png b/screenshot/images/8db92bc449fd8303e6c575878277f739.png
diff --git a/screenshot/images/8ea77da3707febb7908ef8b9b866ab1a.png b/screenshot/images/8ea77da3707febb7908ef8b9b866ab1a.png
diff --git a/...ages/53e2e91bac73722062a52995466c9cd7.png → ...ages/8fd517e4ead56a8796a5f74ada660b34.png b/...ages/53e2e91bac73722062a52995466c9cd7.png → ...ages/8fd517e4ead56a8796a5f74ada660b34.png
diff --git a/screenshot/images/9134a89e84a47b6f79c096298c488ca9.png b/screenshot/images/9134a89e84a47b6f79c096298c488ca9.png
diff --git a/screenshot/images/956ea7f9d95f2666857a3561b8f966a2.png b/screenshot/images/956ea7f9d95f2666857a3561b8f966a2.png
diff --git a/screenshot/images/964e313d04b2b7963273a72887772c82.png b/screenshot/images/964e313d04b2b7963273a72887772c82.png
diff --git a/screenshot/images/983e68b535d6b90b66a8685fe0a0ecfd.png b/screenshot/images/983e68b535d6b90b66a8685fe0a0ecfd.png
diff --git a/screenshot/images/9cde47131f1ea91220f72a9ff87fb596.png b/screenshot/images/9cde47131f1ea91220f72a9ff87fb596.png
diff --git a/screenshot/images/a559a4e264d22b0d30073af60c885c55.png b/screenshot/images/a559a4e264d22b0d30073af60c885c55.png
diff --git a/screenshot/images/a86eaef60567cb884d44a598cf641cf4.png b/screenshot/images/a86eaef60567cb884d44a598cf641cf4.png
diff --git a/screenshot/images/acc7785f38b8d371df4a7b5fca0e0e2c.png b/screenshot/images/acc7785f38b8d371df4a7b5fca0e0e2c.png
diff --git a/screenshot/images/b1aeac1b39652032d360fbb739811add.png b/screenshot/images/b1aeac1b39652032d360fbb739811add.png
diff --git a/screenshot/images/b87bcefc17e63eaeac008503dc09bcd2.png b/screenshot/images/b87bcefc17e63eaeac008503dc09bcd2.png
diff --git a/screenshot/images/b8c84e46cacdba9c9d77dca4f86c9be1.png b/screenshot/images/b8c84e46cacdba9c9d77dca4f86c9be1.png
diff --git a/screenshot/images/bcca29dda096c449a9af56b21011ac72.png b/screenshot/images/bcca29dda096c449a9af56b21011ac72.png
diff --git a/screenshot/images/c00e4feec2592a71f69773230a1676f0.png b/screenshot/images/c00e4feec2592a71f69773230a1676f0.png
diff --git a/screenshot/images/c93ea8a6f6b1171c1a6e9564a4c9e32e.png b/screenshot/images/c93ea8a6f6b1171c1a6e9564a4c9e32e.png
diff --git a/...ages/aac50fc804feb90fa89d022bf98759aa.png → ...ages/ca463ad76e09f95f72a42ed868fe4948.png b/...ages/aac50fc804feb90fa89d022bf98759aa.png → ...ages/ca463ad76e09f95f72a42ed868fe4948.png
diff --git a/screenshot/images/cce8675908267fc2da834cfa92ab3e13.png b/screenshot/images/cce8675908267fc2da834cfa92ab3e13.png
diff --git a/screenshot/images/cf258d92f8cf352f9f03f2ec0f7755d3.png b/screenshot/images/cf258d92f8cf352f9f03f2ec0f7755d3.png
diff --git a/...ages/6fcfcbd7483da10b3071428f6bd30296.png → ...ages/d2f98a8d0a36caeef89d185c65215915.png b/...ages/6fcfcbd7483da10b3071428f6bd30296.png → ...ages/d2f98a8d0a36caeef89d185c65215915.png
diff --git a/screenshot/images/d3eca2e2d82dd3fc1099b03ce9a730a8.png b/screenshot/images/d3eca2e2d82dd3fc1099b03ce9a730a8.png
diff --git a/screenshot/images/d42bfac193d59f8c797a9a709a12bde7.png b/screenshot/images/d42bfac193d59f8c797a9a709a12bde7.png
diff --git a/screenshot/images/d5a96d1bd6e76d4282b575dfb0f838f5.png b/screenshot/images/d5a96d1bd6e76d4282b575dfb0f838f5.png
diff --git a/screenshot/images/d5e469e3cda11d2330769e97be3a3c90.png b/screenshot/images/d5e469e3cda11d2330769e97be3a3c90.png
diff --git a/...ages/f702044451fb1c80ee7a3dc495a63c94.png → ...ages/d725775e86cc1f538b8d7cc6e8ce8259.png b/...ages/f702044451fb1c80ee7a3dc495a63c94.png → ...ages/d725775e86cc1f538b8d7cc6e8ce8259.png
diff --git a/screenshot/images/dfd2b5144a0d09e9d7fb37a790ccd449.png b/screenshot/images/dfd2b5144a0d09e9d7fb37a790ccd449.png
diff --git a/screenshot/images/e0fbf7d4cb00da6cc0ca972441de4102.png b/screenshot/images/e0fbf7d4cb00da6cc0ca972441de4102.png
diff --git a/screenshot/images/e6c43544c96380e5feeb9a40447efba9.png b/screenshot/images/e6c43544c96380e5feeb9a40447efba9.png
diff --git a/screenshot/images/e8ac467fa1cc0be915263a5a04743767.png b/screenshot/images/e8ac467fa1cc0be915263a5a04743767.png
diff --git a/screenshot/images/eb127102406fc9994ad887a3b4cddcc9.png b/screenshot/images/eb127102406fc9994ad887a3b4cddcc9.png
diff --git a/screenshot/images/eb7c492fca7e09a0b941ebeff07a2ac9.png b/screenshot/images/eb7c492fca7e09a0b941ebeff07a2ac9.png
diff --git a/screenshot/images/ebad2ab49bc4fec467a73114bc44b0c6.png b/screenshot/images/ebad2ab49bc4fec467a73114bc44b0c6.png
diff --git a/screenshot/images/f063bbae55a3e0af086a49487af3d576.png b/screenshot/images/f063bbae55a3e0af086a49487af3d576.png
diff --git a/screenshot/images/f53c6dbc406bdc274be10bb584d5e4cc.png b/screenshot/images/f53c6dbc406bdc274be10bb584d5e4cc.png
diff --git a/screenshot/images/f67b3a6d8d62b3cfc6067cdc19788e87.png b/screenshot/images/f67b3a6d8d62b3cfc6067cdc19788e87.png
diff --git a/screenshot/images/f6e021370b5f04a51aa1f2f02e5b2960.png b/screenshot/images/f6e021370b5f04a51aa1f2f02e5b2960.png
diff --git a/screenshot/images/f6ec5d84202bc4c1681391e6946cd4ef.png b/screenshot/images/f6ec5d84202bc4c1681391e6946cd4ef.png
diff --git a/...ages/f0560f2649a430518e6d537bccee6b27.png → ...ages/f7136b25d413e24e1594f20444377128.png b/...ages/f0560f2649a430518e6d537bccee6b27.png → ...ages/f7136b25d413e24e1594f20444377128.png
diff --git a/screenshot/images/f8424e56caad9b90dc16fb99d0ba3662.png b/screenshot/images/f8424e56caad9b90dc16fb99d0ba3662.png
diff --git a/screenshot/images/f99dd5cd570d7695135b8cc657c94314.png b/screenshot/images/f99dd5cd570d7695135b8cc657c94314.png
diff --git a/screenshot/images/fb3c2e84ccf3ee89f1415609a2c02cc6.png b/screenshot/images/fb3c2e84ccf3ee89f1415609a2c02cc6.png
diff --git a/screenshot/images/fe044065f5d643cc961ab01ef3307b4a.png b/screenshot/images/fe044065f5d643cc961ab01ef3307b4a.png
diff --git a/src/docs/components/docs-pick-theme/docs-pick-theme.css b/src/docs/components/docs-pick-theme/docs-pick-theme.css
@@ -65,7 +65,8 @@
         background-color: var(--ld-col-rb-010);
 
         &::before {
-          box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-primary-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-1)
+            var(--ld-thm-ocean-primary-focus);
         }
       }
     }
@@ -121,7 +122,8 @@
         background-color: var(--ld-col-rp-010);
 
         &::before {
-          box-shadow: inset 0 0 0 0.1rem var(--ld-thm-bubblegum-primary-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-1)
+            var(--ld-thm-bubblegum-primary-focus);
         }
       }
     }
@@ -177,7 +179,8 @@
         background-color: var(--ld-col-rp-010);
 
         &::before {
-          box-shadow: inset 0 0 0 0.1rem var(--ld-thm-shake-primary-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-1)
+            var(--ld-thm-shake-primary-focus);
         }
       }
     }
@@ -233,7 +236,8 @@
         background-color: var(--ld-col-rp-010);
 
         &::before {
-          box-shadow: inset 0 0 0 0.1rem var(--ld-thm-solvent-primary-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-1)
+            var(--ld-thm-solvent-primary-focus);
         }
       }
     }
@@ -289,7 +293,7 @@
         background-color: var(--ld-col-rg-010);
 
         &::before {
-          box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-primary-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-thm-tea-primary-focus);
         }
       }
     }

diff --git a/src/liquid/components/ld-checkbox/ld-checkbox.css b/src/liquid/components/ld-checkbox/ld-checkbox.css
@@ -64,7 +64,8 @@
       }
       ~ .ld-checkbox__box {
         background-color: transparent;
-        box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-disabled-bg-col);
+        box-shadow: inset 0 0 0 var(--ld-sp-2)
+          var(--ld-checkbox-disabled-bg-col);
       }
 
       &:checked {
@@ -81,20 +82,20 @@
         color: var(--ld-checkbox-col-active);
       }
       ~ .ld-checkbox__box {
-        box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col);
+        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col);
       }
 
       &:focus:focus-visible {
         ~ .ld-checkbox__box {
           background-color: transparent;
-          box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-focus);
         }
       }
       &:active,
       &:active:focus-visible {
         ~ .ld-checkbox__box {
           background-color: var(--ld-checkbox-bg-col-active);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-active);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-active);
         }
       }
 
@@ -104,7 +105,7 @@
         }
         ~ .ld-checkbox__box {
           background-color: var(--ld-checkbox-col);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col);
         }
 
         &:focus:focus-visible {
@@ -113,7 +114,7 @@
           }
           ~ .ld-checkbox__box {
             background-color: var(--ld-checkbox-col-focus);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-focus);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-focus);
           }
         }
         &:active,
@@ -123,7 +124,7 @@
           }
           ~ .ld-checkbox__box {
             background-color: var(--ld-checkbox-col-active);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-active);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-active);
           }
         }
       }
@@ -139,7 +140,7 @@
       &:hover {
         ~ .ld-checkbox__box {
           background-color: var(--ld-checkbox-bg-col-hover);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-hover);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-hover);
         }
 
         &:checked {
@@ -148,7 +149,7 @@
           }
           ~ .ld-checkbox__box {
             background-color: var(--ld-checkbox-col-hover);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-checkbox-col-hover);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-checkbox-col-hover);
           }
         }
       }

diff --git a/src/liquid/components/ld-input-message/ld-input-message.css b/src/liquid/components/ld-input-message/ld-input-message.css
@@ -17,7 +17,7 @@
 }
 
 .ld-input-message__icon {
-  transform: translateY(0.1rem);
+  transform: translateY(var(--ld-sp-2));
   margin-top: var(--ld-sp-2);
   margin-right: var(--ld-sp-6);
   flex-shrink: 0;

diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -62,7 +62,7 @@
     border-radius: var(--ld-br-m);
     display: block;
     pointer-events: none;
-    box-shadow: inset 0 0 0 0.1rem var(--ld-input-border-col);
+    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col);
   }
 
   ::slotted(*),
@@ -327,15 +327,15 @@
   :host(:not(.ld-input--invalid):not([aria-disabled='true']):not([disabled]):hover:not(:focus-within)),
   .ld-input:not(.ld-input--invalid):not([aria-disabled='true']):not([disabled]):hover:not(:focus-within) {
     &::before {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-input-border-col-hover);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col-hover);
     }
   }
 }
 
 :host(:not(.ld-input--invalid):focus-within),
 .ld-input:not(.ld-input--invalid):focus-within {
   &::before {
-    box-shadow: inset 0 0 0 0.1rem var(--ld-thm-primary);
+    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-thm-primary);
   }
 }
 
@@ -358,7 +358,7 @@
 :host(.ld-input--invalid:not([disabled]):not([aria-disabled='true'])),
 .ld-input--invalid:not([disabled]):not([aria-disabled='true']) {
   &::before {
-    box-shadow: inset 0 0 0 0.1rem var(--ld-input-text-col-invalid);
+    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-text-col-invalid);
   }
 
   > input,
@@ -401,7 +401,7 @@
   background-color: var(--ld-input-bg-col-disabled);
 
   &::before {
-    box-shadow: inset 0 0 0 0.1rem var(--ld-input-border-col-disabled);
+    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col-disabled);
   }
 
   input,

diff --git a/src/liquid/components/ld-radio/ld-radio.css b/src/liquid/components/ld-radio/ld-radio.css
@@ -65,7 +65,7 @@
       }
       ~ .ld-radio__box {
         background-color: transparent;
-        box-shadow: inset 0 0 0 0.1rem var(--ld-radio-disabled-bg-col);
+        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-disabled-bg-col);
       }
 
       &:checked {
@@ -82,20 +82,20 @@
         background-color: var(--ld-radio-col-active);
       }
       ~ .ld-radio__box {
-        box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col);
+        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col);
       }
 
       &:focus:focus-visible {
         ~ .ld-radio__box {
           background-color: transparent;
-          box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-focus);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-focus);
         }
       }
       &:active,
       &:active:focus-visible {
         ~ .ld-radio__box {
           background-color: var(--ld-radio-bg-col-active);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-active);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-active);
         }
       }
 
@@ -105,7 +105,7 @@
         }
         ~ .ld-radio__box {
           background-color: var(--ld-radio-col);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col);
         }
 
         &:focus:focus-visible {
@@ -114,7 +114,7 @@
           }
           ~ .ld-radio__box {
             background-color: var(--ld-radio-col-focus);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-focus);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-focus);
           }
         }
         &:active,
@@ -124,7 +124,7 @@
           }
           ~ .ld-radio__box {
             background-color: var(--ld-radio-col-active);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-active);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-active);
           }
         }
       }
@@ -140,7 +140,7 @@
       &:hover {
         ~ .ld-radio__box {
           background-color: var(--ld-radio-bg-col-hover);
-          box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-hover);
+          box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-hover);
         }
 
         &:checked {
@@ -149,7 +149,7 @@
           }
           ~ .ld-radio__box {
             background-color: var(--ld-radio-col-hover);
-            box-shadow: inset 0 0 0 0.1rem var(--ld-radio-col-hover);
+            box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-radio-col-hover);
           }
         }
       }
@@ -200,7 +200,7 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
-  box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck4);
+  box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-col-rblck4);
 }
 
 :host,

diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css
@@ -82,7 +82,7 @@
   }
 
   &:where(:focus:focus-visible):before {
-    box-shadow: inset 0 0 0 0.1rem var(--ld-option-thm-col);
+    box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-option-thm-col);
   }
 
   &:where(:not([disabled]):not([aria-disabled='true'])) {

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -247,7 +247,7 @@
   &:where(:not(.ld-select--detached):not(.ld-select--expanded)) {
     :where(select),
     :where(.ld-select__btn-trigger) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-col-border);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-col-border);
     }
   }
 
@@ -258,7 +258,8 @@
       &:where(:not(:disabled):not([aria-disabled='true']):not(.ld-select__btn-trigger--detached):not([aria-expanded='true'])) {
         @media (hover: hover) {
           &:hover:not(:focus:focus-visible) {
-            box-shadow: inset 0 0 0 0.1rem var(--ld-select-col-border-hover);
+            box-shadow: inset 0 0 0 var(--ld-sp-2)
+              var(--ld-select-col-border-hover);
           }
         }
       }
@@ -270,7 +271,7 @@
 .ld-select--invalid .ld-select__btn-trigger--invalid {
   &:where(:not(:disabled)) {
     &:where(:focus:focus-visible) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-invalid-col);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);
     }
   }
 
@@ -281,7 +282,7 @@
     }
 
     &:where(:not(.ld-select__btn-trigger--ghost)) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-invalid-col);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);
     }
 
     + .ld-icon,
@@ -292,7 +293,7 @@
 
     @media (hover: hover) {
       &:hover {
-        box-shadow: inset 0 0 0 0.1rem var(--ld-select-invalid-col);
+        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);
 
         + .ld-icon,
         + .ld-select__icon,
@@ -499,7 +500,7 @@
 :where(.ld-select:not([disabled]):not([aria-disabled]):not(.ld-select--invalid)) {
   .ld-select__btn-trigger {
     &:where(:focus:focus-visible) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-thm-col);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);
     }
   }
 
@@ -538,7 +539,7 @@
       }
     }
     &:where(:focus:focus-visible) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-thm-col);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);
 
       .ld-select__icon,
       + .ld-select__icon,
@@ -562,7 +563,7 @@
   :where(select:not(:disabled)),
   :where(.ld-select__btn-trigger) {
     &:where(:focus:focus-visible) {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-select-thm-col);
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);
     }
   }
 }