feat: add spacing system (#474)

* feat: add spacing system

* refactor: update spacing naming

* chore: add leading 0

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/shared/types/Spacing.ts

@@ -0,0 +1,14 @@
+/**
+ * An object representing various spacing values used throughout the application.
+ * Each key corresponds to a specific spacing size based on the 4px grid system.
+ */
+export const spacing = {
+    'spacing-1': '0.125rem',
+    'spacing-2': '0.25rem',
+    'spacing-3': '0.5rem',
+    'spacing-4': '0.75rem',
+    'spacing-5': '1rem',
+    'spacing-6': '1.25rem',
+    'spacing-7': '1.5rem',
+    'spacing-8': '2rem',
+} as const;

unocss.config.ts

@@ -4,6 +4,7 @@ import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
 import { defineConfig } from 'unocss';
 
+import { spacing } from './src/shared/types/Spacing';
 import { colors } from './src/shared/types/ThemeColors';
 
 export default defineConfig({
@@ -36,6 +37,7 @@ export default defineConfig({
             'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
         },
         colors,
+        spacing,
     },
     variants: [
         matcher => {