@liftkit-vue/theme-css 0.1.0

package/css/margins.css

@@ -0,0 +1,947 @@
+@import "./liftkitvars.css";
+
+.mt-2xs {
+  margin-top: var(--lk-size-2xs);
+}
+
+.mt-xs {
+  margin-top: var(--lk-size-xs);
+}
+
+.mt-sm {
+  margin-top: var(--lk-size-sm);
+}
+
+.mt-md {
+  margin-top: var(--lk-size-md);
+}
+
+.mt-lg {
+  margin-top: var(--lk-size-lg);
+}
+
+.mt-xl {
+  margin-top: var(--lk-size-xl);
+}
+
+.mt-2xl {
+  margin-top: var(--lk-size-2xl);
+}
+
+.mr-2xs {
+  margin-right: var(--lk-size-2xs);
+}
+
+.mr-xs {
+  margin-right: var(--lk-size-xs);
+}
+
+.mr-sm {
+  margin-right: var(--lk-size-sm);
+}
+
+.mr-md {
+  margin-right: var(--lk-size-md);
+}
+
+.mr-lg {
+  margin-right: var(--lk-size-lg);
+}
+
+.mr-xl {
+  margin-right: var(--lk-size-xl);
+}
+
+.mr-2xl {
+  margin-right: var(--lk-size-2xl);
+}
+
+.mb-2xs {
+  margin-bottom: var(--lk-size-2xs);
+}
+
+.mb-xs {
+  margin-bottom: var(--lk-size-xs);
+}
+
+.mb-sm {
+  margin-bottom: var(--lk-size-sm);
+}
+
+.mb-md {
+  margin-bottom: var(--lk-size-md);
+}
+
+.mb-lg {
+  margin-bottom: var(--lk-size-lg);
+}
+
+.mb-xl {
+  margin-bottom: var(--lk-size-xl);
+}
+
+.mb-2xl {
+  margin-bottom: var(--lk-size-2xl);
+}
+
+.m-left-2xs {
+  margin-left: var(--lk-size-2xs);
+}
+
+.m-left-xs {
+  margin-left: var(--lk-size-xs);
+}
+
+.m-left-sm {
+  margin-left: var(--lk-size-sm);
+}
+
+.m-left-md {
+  margin-left: var(--lk-size-md);
+}
+
+.m-left-lg {
+  margin-left: var(--lk-size-lg);
+}
+
+.m-left-xl {
+  margin-left: var(--lk-size-xl);
+}
+
+.m-left-2xl {
+  margin-left: var(--lk-size-2xl);
+}
+
+.my-2xs {
+  margin-top: var(--lk-size-2xs);
+  margin-bottom: var(--lk-size-2xs);
+}
+
+.my-xs {
+  margin-top: var(--lk-size-xs);
+  margin-bottom: var(--lk-size-xs);
+}
+
+.my-sm {
+  margin-top: var(--lk-size-sm);
+  margin-bottom: var(--lk-size-sm);
+}
+
+.my-md {
+  margin-top: var(--lk-size-md);
+  margin-bottom: var(--lk-size-md);
+}
+
+.my-lg {
+  margin-top: var(--lk-size-lg);
+  margin-bottom: var(--lk-size-lg);
+}
+
+.my-xl {
+  margin-top: var(--lk-size-xl);
+  margin-bottom: var(--lk-size-xl);
+}
+
+.my-2xl {
+  margin-top: var(--lk-size-2xl);
+  margin-bottom: var(--lk-size-2xl);
+}
+
+.mx-2xs {
+  margin-right: var(--lk-size-2xs);
+  margin-left: var(--lk-size-2xs);
+}
+
+.mx-xs {
+  margin-right: var(--lk-size-xs);
+  margin-left: var(--lk-size-xs);
+}
+
+.mx-sm {
+  margin-right: var(--lk-size-sm);
+  margin-left: var(--lk-size-sm);
+}
+
+.mx-md {
+  margin-right: var(--lk-size-md);
+  margin-left: var(--lk-size-md);
+}
+
+.mx-lg {
+  margin-right: var(--lk-size-lg);
+  margin-left: var(--lk-size-lg);
+}
+
+.mx-xl {
+  margin-right: var(--lk-size-xl);
+  margin-left: var(--lk-size-xl);
+}
+
+.mx-2xl {
+  margin-right: var(--lk-size-2xl);
+  margin-left: var(--lk-size-2xl);
+}
+
+.display1.mt-2xs,
+.display2.mt-2xs,
+.title1.mt-2xs,
+.title2.mt-2xs,
+.title3.mt-2xs,
+.heading.mt-2xs,
+.subheading.mt-2xs,
+.body.mt-2xs,
+.callout.mt-2xs,
+.label.mt-2xs,
+.caption.mt-2xs,
+.capline.mt-2xs,
+.display1-bold.mt-2xs,
+.display2-bold.mt-2xs,
+.title1-bold.mt-2xs,
+.title2-bold.mt-2xs,
+.title3-bold.mt-2xs,
+.heading-bold.mt-2xs,
+.subheading-bold.mt-2xs,
+.body-bold.mt-2xs,
+.callout-bold.mt-2xs,
+.label-bold.mt-2xs,
+.caption-bold.mt-2xs,
+.capline-bold.mt-2xs {
+  margin-top: var(--lk-size-2xs);
+}
+
+.display1.mt-xs,
+.display2.mt-xs,
+.title1.mt-xs,
+.title2.mt-xs,
+.title3.mt-xs,
+.heading.mt-xs,
+.subheading.mt-xs,
+.body.mt-xs,
+.callout.mt-xs,
+.label.mt-xs,
+.caption.mt-xs,
+.capline.mt-xs,
+.display1-bold.mt-xs,
+.display2-bold.mt-xs,
+.title1-bold.mt-xs,
+.title2-bold.mt-xs,
+.title3-bold.mt-xs,
+.heading-bold.mt-xs,
+.subheading-bold.mt-xs,
+.body-bold.mt-xs,
+.callout-bold.mt-xs,
+.label-bold.mt-xs,
+.caption-bold.mt-xs,
+.capline-bold.mt-xs {
+  margin-top: var(--lk-size-xs);
+}
+
+.display1.mt-sm,
+.display2.mt-sm,
+.title1.mt-sm,
+.title2.mt-sm,
+.title3.mt-sm,
+.heading.mt-sm,
+.subheading.mt-sm,
+.body.mt-sm,
+.callout.mt-sm,
+.label.mt-sm,
+.caption.mt-sm,
+.capline.mt-sm,
+.display1-bold.mt-sm,
+.display2-bold.mt-sm,
+.title1-bold.mt-sm,
+.title2-bold.mt-sm,
+.title3-bold.mt-sm,
+.heading-bold.mt-sm,
+.subheading-bold.mt-sm,
+.body-bold.mt-sm,
+.callout-bold.mt-sm,
+.label-bold.mt-sm,
+.caption-bold.mt-sm,
+.capline-bold.mt-sm {
+  margin-top: var(--lk-size-sm);
+}
+
+/* Repeat for other margin directions and sizes */
+
+.display1.mt-md,
+.display2.mt-md,
+.title1.mt-md,
+.title2.mt-md,
+.title3.mt-md,
+.heading.mt-md,
+.subheading.mt-md,
+.body.mt-md,
+.callout.mt-md,
+.label.mt-md,
+.caption.mt-md,
+.capline.mt-md,
+.display1-bold.mt-md,
+.display2-bold.mt-md,
+.title1-bold.mt-md,
+.title2-bold.mt-md,
+.title3-bold.mt-md,
+.heading-bold.mt-md,
+.subheading-bold.mt-md,
+.body-bold.mt-md,
+.callout-bold.mt-md,
+.label-bold.mt-md,
+.caption-bold.mt-md,
+.capline-bold.mt-md {
+  margin-top: var(--lk-size-md);
+}
+
+.display1.mt-lg,
+.display2.mt-lg,
+.title1.mt-lg,
+.title2.mt-lg,
+.title3.mt-lg,
+.heading.mt-lg,
+.subheading.mt-lg,
+.body.mt-lg,
+.callout.mt-lg,
+.label.mt-lg,
+.caption.mt-lg,
+.capline.mt-lg,
+.display1-bold.mt-lg,
+.display2-bold.mt-lg,
+.title1-bold.mt-lg,
+.title2-bold.mt-lg,
+.title3-bold.mt-lg,
+.heading-bold.mt-lg,
+.subheading-bold.mt-lg,
+.body-bold.mt-lg,
+.callout-bold.mt-lg,
+.label-bold.mt-lg,
+.caption-bold.mt-lg,
+.capline-bold.mt-lg {
+  margin-top: var(--lk-size-lg);
+}
+
+.display1.mt-xl,
+.display2.mt-xl,
+.title1.mt-xl,
+.title2.mt-xl,
+.title3.mt-xl,
+.heading.mt-xl,
+.subheading.mt-xl,
+.body.mt-xl,
+.callout.mt-xl,
+.label.mt-xl,
+.caption.mt-xl,
+.capline.mt-xl,
+.display1-bold.mt-xl,
+.display2-bold.mt-xl,
+.title1-bold.mt-xl,
+.title2-bold.mt-xl,
+.title3-bold.mt-xl,
+.heading-bold.mt-xl,
+.subheading-bold.mt-xl,
+.body-bold.mt-xl,
+.callout-bold.mt-xl,
+.label-bold.mt-xl,
+.caption-bold.mt-xl,
+.capline-bold.mt-xl {
+  margin-top: var(--lk-size-xl);
+}
+
+.display1.mt-2xl,
+.display2.mt-2xl,
+.title1.mt-2xl,
+.title2.mt-2xl,
+.title3.mt-2xl,
+.heading.mt-2xl,
+.subheading.mt-2xl,
+.body.mt-2xl,
+.callout.mt-2xl,
+.label.mt-2xl,
+.caption.mt-2xl,
+.capline.mt-2xl,
+.display1-bold.mt-2xl,
+.display2-bold.mt-2xl,
+.title1-bold.mt-2xl,
+.title2-bold.mt-2xl,
+.title3-bold.mt-2xl,
+.heading-bold.mt-2xl,
+.subheading-bold.mt-2xl,
+.body-bold.mt-2xl,
+.callout-bold.mt-2xl,
+.label-bold.mt-2xl,
+.caption-bold.mt-2xl,
+.capline-bold.mt-2xl {
+  margin-top: var(--lk-size-2xl);
+}
+
+.display1.mr-2xs,
+.display2.mr-2xs,
+.title1.mr-2xs,
+.title2.mr-2xs,
+.title3.mr-2xs,
+.heading.mr-2xs,
+.subheading.mr-2xs,
+.body.mr-2xs,
+.callout.mr-2xs,
+.label.mr-2xs,
+.caption.mr-2xs,
+.capline.mr-2xs,
+.display1-bold.mr-2xs,
+.display2-bold.mr-2xs,
+.title1-bold.mr-2xs,
+.title2-bold.mr-2xs,
+.title3-bold.mr-2xs,
+.heading-bold.mr-2xs,
+.subheading-bold.mr-2xs,
+.body-bold.mr-2xs,
+.callout-bold.mr-2xs,
+.label-bold.mr-2xs,
+.caption-bold.mr-2xs,
+.capline-bold.mr-2xs {
+  margin-right: var(--lk-size-2xs);
+}
+
+.display1.mr-xs,
+.display2.mr-xs,
+.title1.mr-xs,
+.title2.mr-xs,
+.title3.mr-xs,
+.heading.mr-xs,
+.subheading.mr-xs,
+.body.mr-xs,
+.callout.mr-xs,
+.label.mr-xs,
+.caption.mr-xs,
+.capline.mr-xs,
+.display1-bold.mr-xs,
+.display2-bold.mr-xs,
+.title1-bold.mr-xs,
+.title2-bold.mr-xs,
+.title3-bold.mr-xs,
+.heading-bold.mr-xs,
+.subheading-bold.mr-xs,
+.body-bold.mr-xs,
+.callout-bold.mr-xs,
+.label-bold.mr-xs,
+.caption-bold.mr-xs,
+.capline-bold.mr-xs {
+  margin-right: var(--lk-size-xs);
+}
+
+.display1.mr-sm,
+.display2.mr-sm,
+.title1.mr-sm,
+.title2.mr-sm,
+.title3.mr-sm,
+.heading.mr-sm,
+.subheading.mr-sm,
+.body.mr-sm,
+.callout.mr-sm,
+.label.mr-sm,
+.caption.mr-sm,
+.capline.mr-sm,
+.display1-bold.mr-sm,
+.display2-bold.mr-sm,
+.title1-bold.mr-sm,
+.title2-bold.mr-sm,
+.title3-bold.mr-sm,
+.heading-bold.mr-sm,
+.subheading-bold.mr-sm,
+.body-bold.mr-sm,
+.callout-bold.mr-sm,
+.label-bold.mr-sm,
+.caption-bold.mr-sm,
+.capline-bold.mr-sm {
+  margin-right: var(--lk-size-sm);
+}
+
+/* Repeat for other margin directions and sizes */
+
+.display1.mr-md,
+.display2.mr-md,
+.title1.mr-md,
+.title2.mr-md,
+.title3.mr-md,
+.heading.mr-md,
+.subheading.mr-md,
+.body.mr-md,
+.callout.mr-md,
+.label.mr-md,
+.caption.mr-md,
+.capline.mr-md,
+.display1-bold.mr-md,
+.display2-bold.mr-md,
+.title1-bold.mr-md,
+.title2-bold.mr-md,
+.title3-bold.mr-md,
+.heading-bold.mr-md,
+.subheading-bold.mr-md,
+.body-bold.mr-md,
+.callout-bold.mr-md,
+.label-bold.mr-md,
+.caption-bold.mr-md,
+.capline-bold.mr-md {
+  margin-right: var(--lk-size-md);
+}
+
+.display1.mr-lg,
+.display2.mr-lg,
+.title1.mr-lg,
+.title2.mr-lg,
+.title3.mr-lg,
+.heading.mr-lg,
+.subheading.mr-lg,
+.body.mr-lg,
+.callout.mr-lg,
+.label.mr-lg,
+.caption.mr-lg,
+.capline.mr-lg,
+.display1-bold.mr-lg,
+.display2-bold.mr-lg,
+.title1-bold.mr-lg,
+.title2-bold.mr-lg,
+.title3-bold.mr-lg,
+.heading-bold.mr-lg,
+.subheading-bold.mr-lg,
+.body-bold.mr-lg,
+.callout-bold.mr-lg,
+.label-bold.mr-lg,
+.caption-bold.mr-lg,
+.capline-bold.mr-lg {
+  margin-right: var(--lk-size-lg);
+}
+
+.display1.mr-xl,
+.display2.mr-xl,
+.title1.mr-xl,
+.title2.mr-xl,
+.title3.mr-xl,
+.heading.mr-xl,
+.subheading.mr-xl,
+.body.mr-xl,
+.callout.mr-xl,
+.label.mr-xl,
+.caption.mr-xl,
+.capline.mr-xl,
+.display1-bold.mr-xl,
+.display2-bold.mr-xl,
+.title1-bold.mr-xl,
+.title2-bold.mr-xl,
+.title3-bold.mr-xl,
+.heading-bold.mr-xl,
+.subheading-bold.mr-xl,
+.body-bold.mr-xl,
+.callout-bold.mr-xl,
+.label-bold.mr-xl,
+.caption-bold.mr-xl,
+.capline-bold.mr-xl {
+  margin-right: var(--lk-size-xl);
+}
+
+.display1.mr-2xl,
+.display2.mr-2xl,
+.title1.mr-2xl,
+.title2.mr-2xl,
+.title3.mr-2xl,
+.heading.mr-2xl,
+.subheading.mr-2xl,
+.body.mr-2xl,
+.callout.mr-2xl,
+.label.mr-2xl,
+.caption.mr-2xl,
+.capline.mr-2xl,
+.display1-bold.mr-2xl,
+.display2-bold.mr-2xl,
+.title1-bold.mr-2xl,
+.title2-bold.mr-2xl,
+.title3-bold.mr-2xl,
+.heading-bold.mr-2xl,
+.subheading-bold.mr-2xl,
+.body-bold.mr-2xl,
+.callout-bold.mr-2xl,
+.label-bold.mr-2xl,
+.caption-bold.mr-2xl,
+.capline-bold.mr-2xl {
+  margin-right: var(--lk-size-2xl);
+}
+
+.display1.mb-2xs,
+.display2.mb-2xs,
+.title1.mb-2xs,
+.title2.mb-2xs,
+.title3.mb-2xs,
+.heading.mb-2xs,
+.subheading.mb-2xs,
+.body.mb-2xs,
+.callout.mb-2xs,
+.label.mb-2xs,
+.caption.mb-2xs,
+.capline.mb-2xs,
+.display1-bold.mb-2xs,
+.display2-bold.mb-2xs,
+.title1-bold.mb-2xs,
+.title2-bold.mb-2xs,
+.title3-bold.mb-2xs,
+.heading-bold.mb-2xs,
+.subheading-bold.mb-2xs,
+.body-bold.mb-2xs,
+.callout-bold.mb-2xs,
+.label-bold.mb-2xs,
+.caption-bold.mb-2xs,
+.capline-bold.mb-2xs {
+  margin-bottom: var(--lk-size-2xs);
+}
+
+.display1.mb-xs,
+.display2.mb-xs,
+.title1.mb-xs,
+.title2.mb-xs,
+.title3.mb-xs,
+.heading.mb-xs,
+.subheading.mb-xs,
+.body.mb-xs,
+.callout.mb-xs,
+.label.mb-xs,
+.caption.mb-xs,
+.capline.mb-xs,
+.display1-bold.mb-xs,
+.display2-bold.mb-xs,
+.title1-bold.mb-xs,
+.title2-bold.mb-xs,
+.title3-bold.mb-xs,
+.heading-bold.mb-xs,
+.subheading-bold.mb-xs,
+.body-bold.mb-xs,
+.callout-bold.mb-xs,
+.label-bold.mb-xs,
+.caption-bold.mb-xs,
+.capline-bold.mb-xs {
+  margin-bottom: var(--lk-size-xs);
+}
+
+.display1.mb-sm,
+.display2.mb-sm,
+.title1.mb-sm,
+.title2.mb-sm,
+.title3.mb-sm,
+.heading.mb-sm,
+.subheading.mb-sm,
+.body.mb-sm,
+.callout.mb-sm,
+.label.mb-sm,
+.caption.mb-sm,
+.capline.mb-sm,
+.display1-bold.mb-sm,
+.display2-bold.mb-sm,
+.title1-bold.mb-sm,
+.title2-bold.mb-sm,
+.title3-bold.mb-sm,
+.heading-bold.mb-sm,
+.subheading-bold.mb-sm,
+.body-bold.mb-sm,
+.callout-bold.mb-sm,
+.label-bold.mb-sm,
+.caption-bold.mb-sm,
+.capline-bold.mb-sm {
+  margin-bottom: var(--lk-size-sm);
+}
+
+/* Repeat for other margin directions and sizes */
+
+.display1.mb-md,
+.display2.mb-md,
+.title1.mb-md,
+.title2.mb-md,
+.title3.mb-md,
+.heading.mb-md,
+.subheading.mb-md,
+.body.mb-md,
+.callout.mb-md,
+.label.mb-md,
+.caption.mb-md,
+.capline.mb-md,
+.display1-bold.mb-md,
+.display2-bold.mb-md,
+.title1-bold.mb-md,
+.title2-bold.mb-md,
+.title3-bold.mb-md,
+.heading-bold.mb-md,
+.subheading-bold.mb-md,
+.body-bold.mb-md,
+.callout-bold.mb-md,
+.label-bold.mb-md,
+.caption-bold.mb-md,
+.capline-bold.mb-md {
+  margin-bottom: var(--lk-size-md);
+}
+
+.display1.mb-lg,
+.display2.mb-lg,
+.title1.mb-lg,
+.title2.mb-lg,
+.title3.mb-lg,
+.heading.mb-lg,
+.subheading.mb-lg,
+.body.mb-lg,
+.callout.mb-lg,
+.label.mb-lg,
+.caption.mb-lg,
+.capline.mb-lg,
+.display1-bold.mb-lg,
+.display2-bold.mb-lg,
+.title1-bold.mb-lg,
+.title2-bold.mb-lg,
+.title3-bold.mb-lg,
+.heading-bold.mb-lg,
+.subheading-bold.mb-lg,
+.body-bold.mb-lg,
+.callout-bold.mb-lg,
+.label-bold.mb-lg,
+.caption-bold.mb-lg,
+.capline-bold.mb-lg {
+  margin-bottom: var(--lk-size-lg);
+}
+
+.display1.mb-xl,
+.display2.mb-xl,
+.title1.mb-xl,
+.title2.mb-xl,
+.title3.mb-xl,
+.heading.mb-xl,
+.subheading.mb-xl,
+.body.mb-xl,
+.callout.mb-xl,
+.label.mb-xl,
+.caption.mb-xl,
+.capline.mb-xl,
+.display1-bold.mb-xl,
+.display2-bold.mb-xl,
+.title1-bold.mb-xl,
+.title2-bold.mb-xl,
+.title3-bold.mb-xl,
+.heading-bold.mb-xl,
+.subheading-bold.mb-xl,
+.body-bold.mb-xl,
+.callout-bold.mb-xl,
+.label-bold.mb-xl,
+.caption-bold.mb-xl,
+.capline-bold.mb-xl {
+  margin-bottom: var(--lk-size-xl);
+}
+
+.display1.mb-2xl,
+.display2.mb-2xl,
+.title1.mb-2xl,
+.title2.mb-2xl,
+.title3.mb-2xl,
+.heading.mb-2xl,
+.subheading.mb-2xl,
+.body.mb-2xl,
+.callout.mb-2xl,
+.label.mb-2xl,
+.caption.mb-2xl,
+.capline.mb-2xl,
+.display1-bold.mb-2xl,
+.display2-bold.mb-2xl,
+.title1-bold.mb-2xl,
+.title2-bold.mb-2xl,
+.title3-bold.mb-2xl,
+.heading-bold.mb-2xl,
+.subheading-bold.mb-2xl,
+.body-bold.mb-2xl,
+.callout-bold.mb-2xl,
+.label-bold.mb-2xl,
+.caption-bold.mb-2xl,
+.capline-bold.mb-2xl {
+  margin-bottom: var(--lk-size-2xl);
+}
+
+.display1.m-left-2xs,
+.display2.m-left-2xs,
+.title1.m-left-2xs,
+.title2.m-left-2xs,
+.title3.m-left-2xs,
+.heading.m-left-2xs,
+.subheading.m-left-2xs,
+.body.m-left-2xs,
+.callout.m-left-2xs,
+.label.m-left-2xs,
+.caption.m-left-2xs,
+.capline.m-left-2xs,
+.display1-bold.m-left-2xs,
+.display2-bold.m-left-2xs,
+.title1-bold.m-left-2xs,
+.title2-bold.m-left-2xs,
+.title3-bold.m-left-2xs,
+.heading-bold.m-left-2xs,
+.subheading-bold.m-left-2xs,
+.body-bold.m-left-2xs,
+.callout-bold.m-left-2xs,
+.label-bold.m-left-2xs,
+.caption-bold.m-left-2xs,
+.capline-bold.m-left-2xs {
+  margin-left: var(--lk-size-2xs);
+}
+
+.display1.m-left-xs,
+.display2.m-left-xs,
+.title1.m-left-xs,
+.title2.m-left-xs,
+.title3.m-left-xs,
+.heading.m-left-xs,
+.subheading.m-left-xs,
+.body.m-left-xs,
+.callout.m-left-xs,
+.label.m-left-xs,
+.caption.m-left-xs,
+.capline.m-left-xs,
+.display1-bold.m-left-xs,
+.display2-bold.m-left-xs,
+.title1-bold.m-left-xs,
+.title2-bold.m-left-xs,
+.title3-bold.m-left-xs,
+.heading-bold.m-left-xs,
+.subheading-bold.m-left-xs,
+.body-bold.m-left-xs,
+.callout-bold.m-left-xs,
+.label-bold.m-left-xs,
+.caption-bold.m-left-xs,
+.capline-bold.m-left-xs {
+  margin-left: var(--lk-size-xs);
+}
+
+.display1.m-left-sm,
+.display2.m-left-sm,
+.title1.m-left-sm,
+.title2.m-left-sm,
+.title3.m-left-sm,
+.heading.m-left-sm,
+.subheading.m-left-sm,
+.body.m-left-sm,
+.callout.m-left-sm,
+.label.m-left-sm,
+.caption.m-left-sm,
+.capline.m-left-sm,
+.display1-bold.m-left-sm,
+.display2-bold.m-left-sm,
+.title1-bold.m-left-sm,
+.title2-bold.m-left-sm,
+.title3-bold.m-left-sm,
+.heading-bold.m-left-sm,
+.subheading-bold.m-left-sm,
+.body-bold.m-left-sm,
+.callout-bold.m-left-sm,
+.label-bold.m-left-sm,
+.caption-bold.m-left-sm,
+.capline-bold.m-left-sm {
+  margin-left: var(--lk-size-sm);
+}
+
+/* Repeat for other margin directions and sizes */
+
+.display1.m-left-md,
+.display2.m-left-md,
+.title1.m-left-md,
+.title2.m-left-md,
+.title3.m-left-md,
+.heading.m-left-md,
+.subheading.m-left-md,
+.body.m-left-md,
+.callout.m-left-md,
+.label.m-left-md,
+.caption.m-left-md,
+.capline.m-left-md,
+.display1-bold.m-left-md,
+.display2-bold.m-left-md,
+.title1-bold.m-left-md,
+.title2-bold.m-left-md,
+.title3-bold.m-left-md,
+.heading-bold.m-left-md,
+.subheading-bold.m-left-md,
+.body-bold.m-left-md,
+.callout-bold.m-left-md,
+.label-bold.m-left-md,
+.caption-bold.m-left-md,
+.capline-bold.m-left-md {
+  margin-left: var(--lk-size-md);
+}
+
+.display1.m-left-lg,
+.display2.m-left-lg,
+.title1.m-left-lg,
+.title2.m-left-lg,
+.title3.m-left-lg,
+.heading.m-left-lg,
+.subheading.m-left-lg,
+.body.m-left-lg,
+.callout.m-left-lg,
+.label.m-left-lg,
+.caption.m-left-lg,
+.capline.m-left-lg,
+.display1-bold.m-left-lg,
+.display2-bold.m-left-lg,
+.title1-bold.m-left-lg,
+.title2-bold.m-left-lg,
+.title3-bold.m-left-lg,
+.heading-bold.m-left-lg,
+.subheading-bold.m-left-lg,
+.body-bold.m-left-lg,
+.callout-bold.m-left-lg,
+.label-bold.m-left-lg,
+.caption-bold.m-left-lg,
+.capline-bold.m-left-lg {
+  margin-left: var(--lk-size-lg);
+}
+
+.display1.m-left-xl,
+.display2.m-left-xl,
+.title1.m-left-xl,
+.title2.m-left-xl,
+.title3.m-left-xl,
+.heading.m-left-xl,
+.subheading.m-left-xl,
+.body.m-left-xl,
+.callout.m-left-xl,
+.label.m-left-xl,
+.caption.m-left-xl,
+.capline.m-left-xl,
+.display1-bold.m-left-xl,
+.display2-bold.m-left-xl,
+.title1-bold.m-left-xl,
+.title2-bold.m-left-xl,
+.title3-bold.m-left-xl,
+.heading-bold.m-left-xl,
+.subheading-bold.m-left-xl,
+.body-bold.m-left-xl,
+.callout-bold.m-left-xl,
+.label-bold.m-left-xl,
+.caption-bold.m-left-xl,
+.capline-bold.m-left-xl {
+  margin-left: var(--lk-size-xl);
+}
+
+.display1.m-left-2xl,
+.display2.m-left-2xl,
+.title1.m-left-2xl,
+.title2.m-left-2xl,
+.title3.m-left-2xl,
+.heading.m-left-2xl,
+.subheading.m-left-2xl,
+.body.m-left-2xl,
+.callout.m-left-2xl,
+.label.m-left-2xl,
+.caption.m-left-2xl,
+.capline.m-left-2xl,
+.display1-bold.m-left-2xl,
+.display2-bold.m-left-2xl,
+.title1-bold.m-left-2xl,
+.title2-bold.m-left-2xl,
+.title3-bold.m-left-2xl,
+.heading-bold.m-left-2xl,
+.subheading-bold.m-left-2xl,
+.body-bold.m-left-2xl,
+.callout-bold.m-left-2xl,
+.label-bold.m-left-2xl,
+.caption-bold.m-left-2xl,
+.capline-bold.m-left-2xl {
+  margin-left: var(--lk-size-2xl);
+}