feat: base 10 support (#16)

.changeset/metal-melons-scream.md

@@ -0,0 +1,7 @@
+---
+'@igloo-ui/tokens': major
+---
+
+## BREAKING CHANGE
+
+- Adding base 10 support. If your project uses the mathematical trick of basing the value of `1rem` equals `10px`, there is also an base10 output within the dist folder of this package.<br/> In CSS, you can import the files by doing:<br/> `@import '~@igloo-ui/tokens/dist/base10/variables.css';`

.storybook/preview-body.html

@@ -3,6 +3,6 @@
   html {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
       Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    font-size: 10px;
+    font-size: 16px;
   }
 </style>

.storybook/preview.cjs

@@ -1,5 +1,5 @@
 const tokenContext = require.context(
-  '!!raw-loader!../docs',
+  '!!raw-loader!../docs/base10',
   true,
   /.\.(css|less|scss|svg)$/
 );

build.js

@@ -110,12 +110,18 @@ StyleDictionary.registerTransform({
       token.attributes.category === 'border-radius'
     );
   },
-  transformer: function (token) {
+  transformer: function (token, options) {
     if (parseInt(token.original.value) === 0) {
       return token.original.value;
     }
 
-    const base = 10;
+    let base;
+    if (options.options?.base10) {
+      base = 10;
+    } else {
+      base = 16;
+    }
+
     return `${parseInt(token.value) / base}rem`;
   },
 });

config.json

@@ -19,7 +19,10 @@
           "destination": "variables.css",
           "format": "css/variables"
         }
-      ]
+      ],
+      "options": {
+        "size": 16
+      }
     },
     "docs": {
       "transformGroup": "custom/scss",
@@ -40,6 +43,58 @@
           "format": "json"
         }
       ]
+    },
+    "scss/10": {
+      "transformGroup": "custom/scss",
+      "buildPath": "dist/base10/",
+      "files": [
+        {
+          "destination": "_variables.scss",
+          "format": "scss/variables"
+        }
+      ],
+      "options": {
+        "base10": true
+      }
+    },
+    "css/10": {
+      "transformGroup": "custom/css",
+      "buildPath": "dist/base10/",
+      "files": [
+        {
+          "destination": "variables.css",
+          "format": "css/variables"
+        }
+      ],
+      "options": {
+        "base10": true
+      }
+    },
+    "docs/10": {
+      "transformGroup": "custom/scss",
+      "buildPath": "docs/base10/",
+      "files": [
+        {
+          "destination": "tokens.scss",
+          "format": "custom/doc"
+        }
+      ],
+      "options": {
+        "base10": true
+      }
+    },
+    "json/10": {
+      "transformGroup": "custom/scss",
+      "buildPath": "docs/base10/",
+      "files": [
+        {
+          "destination": "tokens.json",
+          "format": "json"
+        }
+      ],
+      "options": {
+        "base10": true
+      }
     }
   }
 }