@aarhus-university/au-designsystem-delphinus 0.24.1 → 0.25.0

package/Gruntfile.js

@@ -6,6 +6,7 @@ module.exports = (grunt) => {
   // configure the tasks
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
+
     // clean the build directory
     clean: {
       prebuild: {
@@ -14,6 +15,12 @@ module.exports = (grunt) => {
       postbuild: {
         src: ['build/**/_*.html'],
       },
+      figmatokens: {
+        src: ['build/figma-tokens', 'bin']
+      },
+      bin: {
+        src: ['bin']
+      }
     },
     cleanempty: {
       options: {},
@@ -28,6 +35,7 @@ module.exports = (grunt) => {
           '!**/*.scss',
           '!**/*.pug',
           '!**/*.js',
+          '!figma-tokens/**/*.json',
           'js/3rdparty/**/*.js',
           'projects/**/*.js',
           '.htaccess',
@@ -35,10 +43,40 @@ module.exports = (grunt) => {
         dest: 'build',
         expand: true,
       },
+      figmastyles: {
+        options: {
+          flatten: true
+        },
+        files: {
+          //the breakpoints
+          'bin/pre/breakpoint/01_medium.json' : 'source/figma-tokens/styles/breakpoint.json',
+          'bin/pre/breakpoint/02_wide.json' : 'source/figma-tokens/styles/breakpoint.json',
+          //the color colorthemes
+          'bin/pre/theme/01_cyan.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/02_turquoise.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/03_green.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/04_yellow.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/05_orange.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/06_red.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/07_magenta.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/08_purple.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/09_blue.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/21_mitstudie.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/22_omnibus.json' : 'source/figma-tokens/styles/theme.json',
+          'bin/pre/theme/23_brightspace.json' : 'source/figma-tokens/styles/theme.json',
+        },
+      },
+      figmatokens: {
+        cwd: 'source',
+        src: 'figma-tokens/*.json',
+        dest: 'bin/pre',
+        expand: true,
+        flatten: true,
+      }
     },
     watch: {
       sass: {
-        files: ['source/**/*.scss'],
+        files: ['source/**/*.scss', '!source/figma-tokens/**/*.scss'],
         tasks: ['sass', 'cleanempty'],
       },
       pug: {
@@ -46,7 +84,7 @@ module.exports = (grunt) => {
         tasks: ['pug', 'cleanempty'],
       },
       copy: {
-        files: ['source/**', '!source/**/*.scss', '!source/**/*.pug'],
+        files: ['source/**', '!source/**/*.scss', '!source/**/*.pug', '!source/figma-tokens/**/*.json'],
         tasks: ['copy', 'cleanempty'],
       },
       webpack: {
@@ -115,6 +153,18 @@ module.exports = (grunt) => {
           },
         ],
       },
+      figmatokens: {
+        files: [
+          {
+            expand: true,
+            cwd: 'source',
+            src: ['figma-tokens/**/*.scss'],
+            dest: 'bin/pre/cssvars',
+            ext: '.css',
+            flatten: true,
+          },
+        ],
+      },
     },
     connect: {
       server: {
@@ -180,6 +230,141 @@ module.exports = (grunt) => {
         progress: true,
       },
     },
+    'merge-json': {
+      breakpoints: {
+        src: ['bin/pre/breakpoint/*.json'],
+        dest: 'bin/pre/sizes-breakpoints.json'
+      },
+      themes: {
+        src: ['bin/pre/theme/*.json'],
+        dest: 'bin/pre/colors-themes.json'
+      },
+      designsystem: {
+        src: [
+            'bin/figma-tokens/colors-all.json',
+            'bin/figma-tokens/colors-themes.json',
+            'bin/figma-tokens/sizes-default.json',
+            'bin/figma-tokens/sizes-breakpoints.json',
+            'bin/figma-tokens/sizing.json',
+            'bin/figma-tokens/spacing.json',
+            'bin/figma-tokens/shadows-default.json',
+            'bin/figma-tokens/blurs-default.json',
+            'bin/figma-tokens/typography-fonts.json',
+            'bin/figma-tokens/typography-line-widths.json',
+            'bin/figma-tokens/typography-styles.json',
+            'bin/figma-tokens/borders-widths.json',
+            'bin/figma-tokens/borders-default.json',
+            'bin/figma-tokens/borders-theme.json',
+            'bin/figma-tokens/borders-nav-item.json',
+            'bin/figma-tokens/borders-nav-item-theme.json',
+          ],
+        dest: 'build/figma-tokens/design-system.json'
+      },
+      designfile: {
+        src: [
+            'bin/figma-tokens/sizes-default.json',
+            'bin/figma-tokens/sizes-breakpoints.json',
+            'bin/figma-tokens/sizing.json',
+            'bin/figma-tokens/spacing.json',
+            'bin/figma-tokens/blurs-default.json',
+            'bin/figma-tokens/typography-fonts.json',
+            'bin/figma-tokens/typography-line-widths.json',
+            'bin/figma-tokens/typography-styles.json',
+            'bin/figma-tokens/borders-widths.json',
+          ],
+        dest: 'build/figma-tokens/design-file.json'
+      },
+      colorthemes: {
+        src: [
+            'bin/figma-tokens/borders-widths.json',
+            'bin/figma-tokens/borders-theme.json',
+            'bin/figma-tokens/borders-nav-item-theme.json',
+            'bin/figma-tokens/colors-themes.json',
+          ],
+        dest: 'build/figma-tokens/color-themes.json'
+      },
+      breakpointstyles: {
+        src: [
+            'bin/figma-tokens/typography-fonts.json',
+            'bin/figma-tokens/typography-line-widths.json',
+            'bin/figma-tokens/typography-styles.json',
+            'bin/figma-tokens/sizes-breakpoints.json',
+          ],
+        dest: 'build/figma-tokens/breakpoint-styles.json'
+      },
+    },
+    'string-replace': {
+      cssvars: {
+        files: [{
+        flatten: true,
+        expand: true,
+        cwd: 'bin/',
+        src: 'pre/*.json',
+        dest: 'bin/figma-tokens'
+        }],
+        options: {
+          replacements: [{
+            pattern: /(--[a-z0-9-]+)/ig,
+            replacement: function (match) {
+              //console.log(match)
+              var cssvars = grunt.file.read('bin/pre/cssvars/figma-tokens.css');
+              var regex = new RegExp(match + ': ([a-zA-Z0-9-#.,\(\)]+)');
+              var value = cssvars.match(regex);
+              if (value == null) {
+                grunt.fail.fatal('Cannot find css-var: ' + match);
+              }
+              else {
+                return value[1];
+              }
+            }
+          }]
+        }
+      },
+      figmastyles: {
+        files: [{
+        expand: true,
+        cwd: 'bin/',
+        src: ['pre/breakpoint/*.json', 'pre/theme/*.json'],
+        dest: 'bin/'
+        }],
+        options: {
+          replacements: [{
+            pattern: /{{([a-zA-Z0-9-]+)}}/ig,
+            replacement: function (match, value, a, b, path) {
+
+              //extract the filename
+              var regex = new RegExp('([a-zA-Z0-9]+)\/[0-9]+_([a-zA-Z0-9]+).json');
+              var file = path.match(regex);
+              if (file == null) {
+                grunt.fail.fatal('Unable to extract file and folder name from: ' + path);
+              }
+              else {
+                var foldername = file[1];
+                var filename = file[2];
+              }
+
+              //if matched value is not name, find display name i css vars file. Else return the filename.
+              if (value != 'name') {
+                var cssvars = grunt.file.read('bin/pre/cssvars/figma-tokens.css');
+                var regex = new RegExp('--' + foldername + '-' + filename + ': ([a-zA-Z0-9-#. ]+)');
+                var displayname = cssvars.match(regex);
+                if (displayname == null) {
+                  grunt.fail.fatal('Cannot find css var with display name for: ' + filename);
+                }
+                else {
+                  //console.log(displayname[1]);
+                  return displayname[1];
+                }
+              }
+              else {
+                //console.log(filename);
+                return filename;
+              }
+            }
+          }]
+        }
+      }
+    }
   });
 
   // load the tasks
@@ -194,6 +379,8 @@ module.exports = (grunt) => {
   grunt.loadNpmTasks('grunt-browser-sync');
   grunt.loadNpmTasks('grunt-webpack');
   grunt.loadNpmTasks('grunt-sftp-deploy');
+  grunt.loadNpmTasks('grunt-merge-json');
+  grunt.loadNpmTasks('grunt-string-replace');
 
   // define the tasks
 
@@ -201,10 +388,10 @@ module.exports = (grunt) => {
     'clean:prebuild',
     'copy',
     'pug',
-    'sass',
+    'sass:dist',
     'clean:postbuild',
     'cleanempty',
-    'webpack',
+    'webpack'
   ]);
 
   grunt.registerTask('default', ['build', 'connect', 'browserSync', 'watch']);
@@ -214,4 +401,17 @@ module.exports = (grunt) => {
   grunt.registerTask('dev-deploy', ['sftp-deploy:dev']);
 
   grunt.registerTask('deploy-both', ['sftp-deploy']);
+
+  grunt.registerTask('figma-tokens', [
+    'clean:figmatokens',
+    'sass:figmatokens',
+    'copy:figmastyles',
+    'copy:figmatokens',
+    'string-replace:figmastyles',
+    'merge-json:breakpoints',
+    'merge-json:themes',
+    'string-replace:cssvars',
+    'merge-json',
+    'clean:bin'
+  ]);
 };