✨(tokens) generate css utility classes

These were the missing parts in order to use every design tokens
of Cunningham. Including: spacing, font weight, size, family, and
colors. In order to be really versatile and to allow users to
define new design tokens I had to re-organize the way those tokens
are sub divided in sub objects in cunningham.ts file. That's why
sub division are created for theme.typ.sizes for instance.

packages/tokens/src/bin/Generators/CssGenerator.spec.ts

@@ -23,10 +23,20 @@ describe("CssGenerator", () => {
     expect(fs.existsSync(cssTokensFile)).toEqual(false);
     await run(["", "", "-g", "css", opt, "html"]);
     expect(fs.existsSync(cssTokensFile)).toEqual(true);
-    expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`html {
-\t--c--theme--colors--primary: #055FD2;
-\t--c--theme--colors--secondary: #DA0000;
-}`);
+    expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
+      fs
+        .readFileSync(
+          path.join(
+            __dirname,
+            "..",
+            "tests",
+            "assets",
+            "expected-default-" + Config.tokenFilename + ".css"
+          )
+        )
+        .toString()
+        .replace(":root", "html")
+    );
   };
 
   it("Runs with -s options.", async () => {