@lightspeed/design-system-css 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lightspeed/design-system-css
 
+## 1.0.3
+
+### Patch Changes
+
+- [#4344](https://github.com/vend/monocle/pull/4344) [`908e57aea`](https://github.com/vend/monocle/commit/908e57aea8abb71d3b4bb26bcae152f87cf2b874) Thanks [@WaiHaiDere](https://github.com/WaiHaiDere)! - Update checkbox styling to match design (Margin + label)
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/index.css

@@ -2416,7 +2416,7 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-container {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -2444,11 +2444,11 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-label {
-  margin-left: 12px;
+  margin-left: 16px;
 }
 
 .vd-label-only-checkbox-label {
-  margin: auto 0 auto 12px;
+  margin: auto 0 auto 16px;
 }
 
 .vd-checkbox-description {
@@ -2462,7 +2462,7 @@ vd-carousel-frame {
   line-height: 1.25;
   font-weight: 400;
   margin-top: 4px;
-  margin-left: 36px;
+  margin-left: 40px;
 }
 
 .vd-checkbox-tick {

package/dist/vend-styles.css

@@ -2416,7 +2416,7 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-container {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -2444,11 +2444,11 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-label {
-  margin-left: 12px;
+  margin-left: 16px;
 }
 
 .vd-label-only-checkbox-label {
-  margin: auto 0 auto 12px;
+  margin: auto 0 auto 16px;
 }
 
 .vd-checkbox-description {
@@ -2462,7 +2462,7 @@ vd-carousel-frame {
   line-height: 1.25;
   font-weight: 400;
   margin-top: 4px;
-  margin-left: 36px;
+  margin-left: 40px;
 }
 
 .vd-checkbox-tick {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/design-system-css",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Lightspeed's Design System in CSS",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/vend.ui/components/vd-checkbox/vd-checkbox-ns.scss

@@ -4,4 +4,4 @@ $vd-checkbox-tick-thickness: 4px;
 $vd-checkbox-tick-width: 6px;
 $vd-checkbox-tick-height: 11px;
 
-$vd-checkbox-spacing: vd-grid-unit(3);
+$vd-checkbox-spacing: vd-grid-unit(4);