Update for table

src/style/main.scss

@@ -246,6 +246,9 @@
 .height-100{
     height: 100%;
 }
+.height-fit-content{
+    height: fit-content;
+}
 
 .width-50{
     width: 50%;
@@ -257,3 +260,65 @@
 }
 
 
+.flex-0{
+    flex: 0;
+}
+
+// system spacing
+
+
+
+
+
+@for $i from 0 through 10 {
+
+    $size: $i * 5;
+    
+    $properties:
+      "margin" "m",
+      "padding" "p";
+  
+    @each $property, $short in $properties {
+      // all directions
+      .#{$short}a-#{$size} {
+        #{$property}-left: #{$size}px !important; 
+        #{$property}-right: #{$size}px !important;
+        #{$property}-top: #{$size}px !important; 
+        #{$property}-bottom: #{$size}px !important;
+      }
+      // top
+      .#{$short}t-#{$size} {
+        #{$property}-top: #{$size}px !important
+      }
+      // bottom
+      .#{$short}b-#{$size} {
+        #{$property}-bottom: #{$size}px !important
+      }
+      // left
+      .#{$short}l-#{$size} {
+        #{$property}-left: #{$size}px!important
+      }
+      // right
+      .#{$short}r-#{$size} {
+        #{$property}-right: #{$size}px!important
+      }
+      // left and right
+      .#{$short}x-#{$size} {
+        #{$property}-left: #{$size}px!important;
+        #{$property}-right: #{$size}px!important;
+      }
+      // top and bottom
+      .#{$short}y-#{$size} {
+        #{$property}-top: #{$size}px !important;
+        #{$property}-bottom: #{$size}px !important;
+      }
+  
+    }
+  }
+
+
+  @for $i from 0 through 50 {
+    .font-#{$i} {
+        font-size: #{$i}px ;
+    }
+  }