Added base styles, variables, and mixins

src/styles/mixins/spacing.css

@@ -0,0 +1,86 @@
+@∂efine-mixin m $spacing {
+  margin: $spacing;
+}
+
+@∂efine-mixin mt $spacing {
+  margin-top: $spacing;
+}
+
+@∂efine-mixin mb $spacing {
+  margin-bottom: $spacing;
+}
+
+@define-mixin ml $spacing {
+  margin-left: $spacing;
+}
+
+@define-mixin mr $spacing {
+  margin-right: $spacing;
+}
+
+@define-mixin my $spacing {
+  margin-block: $spacing;
+}
+
+@define-mixin mx $spacing {
+  margin-inline: $spacing;
+}
+
+@define-mixin ms $spacing {
+  margin-line-start: $spacing;
+}
+
+@define-mixin me $spacing {
+  margin-line-end: $spacing;
+}
+
+@define-mixin space-x $spacing $reverse: 0 {
+  & > :not(:last-child) {
+    margin-inline-start: calc($spacing * $reverse);
+    margin-inline-end: calc($spacing * (1 - $reverse));
+  }
+}
+
+@∂efine-mixin p $spacing {
+  padding: $spacing;
+}
+
+@∂efine-mixin pt $spacing {
+  padding-top: $spacing;
+}
+
+@∂efine-mixin pb $spacing {
+  padding-bottom: $spacing;
+}
+
+@define-mixin pl $spacing {
+  padding-left: $spacing;
+}
+
+@define-mixin pr $spacing {
+  padding-right: $spacing;
+}
+
+@define-mixin py $spacing {
+  padding-block: $spacing;
+}
+
+@define-mixin px $spacing {
+  padding-inline: $spacing;
+}
+
+@define-mixin ps $spacing {
+  padding-line-start: $spacing;
+}
+
+@define-mixin pe $spacing {
+  padding-line-end: $spacing;
+}
+
+@define-mixin space-y $spacing $reverse: 0 {
+  & > :not(:last-child) {
+    margin-block-start: calc($spacing * $reverse);
+    margin-block-end: calc($spacing * (1 - $reverse));
+  }
+}
+