add spacing vars to theme

src/App.tsx

@@ -6,6 +6,7 @@ import { routes } from './routes';
 import './index.scss';
 import './styles/_typography.scss';
 import './styles/_colors.scss';
+import './styles/_spacing.scss';
 
 export const App = () => {
     const [isLoggedIn, setLoggedIn] = useState(false);

src/_codux/boards-global-setup.ts

@@ -1,3 +1,4 @@
 import '../index.scss';
 import '../styles/_typography.scss';
 import '../styles/_colors.scss';
+import '../styles/_spacing.scss';

src/styles/_spacing.scss

@@ -0,0 +1,29 @@
+@property --space-4 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 4px;
+}
+
+@property --space-8 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 8px;
+}
+
+@property --space-12 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 12px;
+}
+
+@property --space-16 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --space-24 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 24px;
+}