♻️(tokens) handle custom tokens in SassGenerator

Previously the generator was only handling hard-defined design tokens
preventing to make custom tokens to appear in the scss generated file.
This new way of generating the file handles custom tokens in a more
generic way.

.changeset/bright-turtles-rescue.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-tokens": minor
+---
+
+handle custom tokens in SassGenerator

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

@@ -25,27 +25,34 @@ describe("SassGenerator", () => {
 
     expect(fs.existsSync(sassFile)).toEqual(true);
     expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(`
-      "$colors: (
+      "$theme: (
-        'primary': #055FD2,
+        'colors': (
-        'secondary': #DA0000,
+          'primary': #055FD2,
-        'ternary-900': #022858,
+          'secondary': #DA0000,
-        'ogre-odor-is-orange-indeed': #FD5240
+          'ternary-900': #022858,
-      ) !default;
+          'ogre-odor-is-orange-indeed': #FD5240
-      $fontFamilies: (
+        ),
-        'base': Roboto
+        'font': (
-      ) !default;
+          'sizes': (
-      $fontSizes: (
+            'm': 1rem
-        'm': 1rem
+          ),
-      ) !default;
+          'weights': (
-      $fontWeights: (
+            'medium': 400
-        'medium': 400
+          ),
-      ) !default;
+          'families': (
-      $spacings: (
+            'base': Roboto
-        's': 1rem
+          )
-      ) !default;
+        ),
-      $transitions: (
+        'spacings': (
-        'ease': linear
+          's': 1rem
-      ) !default;
+        ),
+        'transitions': (
+          'ease': linear
+        ),
+        'input': (
+          'border-color': #022858
+        )
+      ) !default
       "
     `);
   });

packages/tokens/src/bin/Generators/SassGenerator.ts

@@ -12,43 +12,20 @@ export const sassGenerator: Generator = async (tokens, opts) => {
 };
 
 const generateSassMaps = (tokens: Tokens) => {
-  return [
+  return Object.keys(tokens)
-    generateColorsSassMap(tokens),
+    .map((key) => {
-    generateFontSassMap(tokens),
+      return toSassVariable(`$${key}`, tokens[key]);
-    generateSpacingsSassMap(tokens),
+    })
-    generateTransitionsSassMap(tokens),
+    .join("\n");
-  ].join("\n");
 };
 
-// Generate colors sass map with the ability to create sub map
+function toSassVariable(varName: string, value: any, isDefault = true) {
-// for a color with shades.
+  const out = `${varName}: `;
-// Example: `primary-500: #000` will return `primary: (500: #000)`
+  if (typeof value === "object") {
-const generateColorsSassMap = (tokens: Tokens) => {
+    return out + JSONToSassMap(value, isDefault);
-  return `$colors: ${JSONToSassMap(tokens.theme.colors)};`;
+  }
-};
+  return out + value;
-const generateFontSassMap = (tokens: Tokens) => {
+}
-  return [
-    generateFontFamiliesSassMap(tokens),
-    generateFontSizesSassMap(tokens),
-    generateFontWeightsSassMap(tokens),
-  ].join("\n");
-};
-const generateFontFamiliesSassMap = (tokens: Tokens) => {
-  return `$fontFamilies: ${JSONToSassMap(tokens.theme.font.families)};`;
-};
-const generateFontSizesSassMap = (tokens: Tokens) => {
-  return `$fontSizes: ${JSONToSassMap(tokens.theme.font.sizes)};`;
-};
-const generateFontWeightsSassMap = (tokens: Tokens) => {
-  return `$fontWeights: ${JSONToSassMap(tokens.theme.font.weights)};`;
-};
-const generateSpacingsSassMap = (tokens: Tokens) => {
-  return `$spacings: ${JSONToSassMap(tokens.theme.spacings)};`;
-};
-
-const generateTransitionsSassMap = (tokens: Tokens) => {
-  return `$transitions: ${JSONToSassMap(tokens.theme.transitions)};`;
-};
 
 function JSONToSassMap(json: Object, isDefault = true) {
   function deepQuoteObjectKeys(object: Object) {