ads-scss-tokens-node - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
     "name": "ads-scss-tokens-node",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "",
@@ -12,6 +12,7 @@ "main": "tokens.scss",
     "license": "ISC",
-    "dependencies": {
+    "devDependencies": {
         "@adapt-design-system/tokens": "^0.1.1",
-        "@babel/runtime": "^7.10.3"
+        "@babel/runtime": "^7.10.3",
+        "lodash": "^4.17.15"
     }
 }

README.md

@@ -10,2 +10,13 @@ # js-tokens-to-scss
 
-eg. $primary is too vague in a SCSS context; probably need $ads-primary
+eg. $primary is too vague in a SCSS context; probably need $ads-primary
+
+2. Dictionary - figure out a good workflow
+
+3. Other tokens
+- [ ] Colors
+- [ ] Fonts
+- [ ] FontSizes
+- [ ] FontWeights
+- [ ] LetterSpacings
+- [ ] Radii
+- [ ] SpaceScale

src/dictionary.js

@@ -1,19 +0,32 @@
-var dictionary = {
-    error: 'brand-danger',
-    muted: 'brand-default',
-    background: 'bg-color',
-    backgroundSurface: 'bg-color-secondary',
-    error: 'brand-danger',
-    muted: 'brand-default',
-    accent: 'brand-info',
-    transparent: 'brand-inverse',
-    primary: 'brand-primary',
-    success: 'brand-success',
-    warning: 'brand-warning',
-    muted: 'default-border-color',
-    text: 'font-base-color',
-    subduedText: 'font-color-detail',
-    text: 'font-color-headers',
+/*
+    Dictionary mapping of Mendix sass variable
+    to ADS theme color variable
+
+    IMPORTANT: the value of each key MUST be
+    part of the ThemeColors exported from
+    @adapt-design-system/tokens
+*/
+
+/* @TODO
+    Can we throw an error if the value in here does not map to a color? example was when setting 'transparent' - that is a CSS value not a token name.
+*/
+module.exports = {
+    'brand-info': 'accent',
+    'link-color': 'accent',
+    'bg-color': 'background',
+    'sidebar-bg': 'background',
+    'bg-color-secondary': 'backgroundSurface',
+    'brand-danger': 'error',
+    'brand-default': 'muted',
+    'default-border-color': 'muted',
+    'gray-primary': 'muted',
+    'brand-primary': 'primary',
+    'font-color-detail': 'subduedText',
+    'brand-success': 'success',
+    'font-base-color': 'text',
+    'font-base-color': 'text',
+    'font-color-headers': 'text',
+    'brand-warning': 'warning',
+    'form-input-border-focus-color': 'focus',
+    'form-input-bg-hover': 'accent'
 };
-
-module.exports = dictionary;

src/transformers.js

@@ -1,17 +0,70 @@
-var PREFIX = 'ads';
-var dict = require('./dictionary.js');
+var cloneDeep = require('lodash/cloneDeep');
+var PREFIX = 'ads-';
+var dictionary = require('./dictionary.js');
 
 /*
-    POC of using a lookup table to convert vars to Mendix equivalents
-    
+    First, we generate a JS object with a simpler sturcture:
+    swatchName: `#${hex}`;
+    primary: '#cc0000';
+
+    This way, any other mapping we need to do can simply 
+    take `key: value` without needing to pull out 
+    hex values etc. from the tokens.
 */
-function validateKey(key){
-    return dict[key] || key;
-} 
+function generateJsObject(themeColors) {
+    var obj = cloneDeep(themeColors);
 
+    Object.keys(themeColors).map((swatchName) => {
+        // We encountered the `modes` object that requires an extra level of nesting
+        return swatchName === 'modes'
+            ? Object.keys(themeColors.modes).map((mode) => {
+                  Object.keys(themeColors.modes[mode]).map((subSwatchName) => {
+                      obj.modes[mode][subSwatchName] = `#${themeColors.modes[mode][subSwatchName].hex}`;
+                  });
+              })
+            : (obj[swatchName] = `#${themeColors[swatchName].hex}`);
+    });
+    return obj;
+}
+
+/*
+    Takes swatch name and value, turns into:
+    name: value
+*/
 function makeScssVar(name, value) {
-    return `$${PREFIX}-${validateKey(name)}: #${value};`;
+    var name = makeScssName(name);
+    return `${name}: ${value};`;
 }
 
 /*
+    Takes swatch name and turns it into: $ads-foo
+*/
+function makeScssName(swatch) {
+    return `$${PREFIX}${swatch}`;
+}
+
+/*
+    Reads over the dictionary mapping of Mendix vars to
+    ADS themeColor token names, then returns a string
+    in the format:
+    
+    $ads-mendix-var-name: $ads-theme-color-name;
+    
+    For example:
+    $ads-brand-primary: $ads-primary;
+*/
+function generateMendixVars() {
+    var str = `\n/*
+    Mendix Var Names.
+    These should be set up in the mendix project.
+*/\n`;
+    Object.keys(dictionary).map((mendixVar) => {
+        var mappedName = dictionary[mendixVar];
+
+        str += makeScssVar(mendixVar, makeScssName(mappedName));
+    });
+    return str;
+}
+
+/*
     Iterates over the tokens and turns them into 
@@ -21,15 +74,24 @@ a string containing all SCSS vars.
 function convertToScssVars(themeColors) {
+    var colors = generateJsObject(themeColors);
     var outputString = `// Main Color Swatches\n`;
-    Object.keys(themeColors).map((swatchName) => {
+
+    // Generate basic $ads-var: #hex for all themeColors
+    Object.keys(colors).map((swatchName) => {
         // We encountered the `modes` object that requires an extra level of nesting
         return swatchName === 'modes'
-            ? Object.keys(themeColors.modes).map((mode) => {
-                outputString += `// ${mode} mode swatches\n`;
-                  Object.keys(themeColors.modes[mode]).map((subSwatch) => {
-                      outputString += `${makeScssVar(`${mode}-mode-${subSwatch}`,themeColors.modes[mode][subSwatch].hex)}`;
+            ? Object.keys(colors.modes).map((mode) => {
+                  outputString += `// ${mode} mode swatches\n`;
+                  Object.keys(colors.modes[mode]).map((subSwatchName) => {
+                      outputString += `${makeScssVar(
+                          `${mode}-mode-${subSwatchName}`,
+                          colors.modes[mode][subSwatchName]
+                      )}`;
                   });
               })
-            : (outputString += `${makeScssVar(swatchName, themeColors[swatchName].hex)}`);
+            : (outputString += `${makeScssVar(swatchName, colors[swatchName])}`);
     });
-
+    
+    // Generate vars that map mendix var to ADS token var
+    outputString += generateMendixVars();
+    
     // Now add newlines after each SCSS var
@@ -36,0 +98,0 @@ outputString = outputString.split(';').join(';\n');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7115

increased by79.9%

Dependency count

0

decreased by-100%

Lines of code

132

increased by103.08%

Number of lines in readme file

21

increased by110%

Worsened metrics

Dev dependency count

3

increased byInfinity%

Dependency changes

• - Removed@adapt-design-system/tokens@^0.1.1

• - Removed@babel/runtime@^7.10.3

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)