Indigo.Design Code Generator (v1.1.0)

Robert Stoffers / Wednesday, February 6, 2019

We are excited to announce that we have just released the next version of our Indigo.Design Code Generator extension for VS Code. You can download the latest version at our Indigo.Design website. Just sign in and click on the Download Indigo.Design Assets button at the bottom left.

Here are the highlights for this release:

Theming

We have implemented theme generation along side the code generation. This means that when you generate code, not only will you get the HTML and SCSS required to render and layout the Ignite UI for Angular components but you will now get extra SCSS that contains the palettes used by the designer in Sketch. Previously we did not generate these theme files which meant that users were stuck using the default theme that comes with Ignite UI for Angular. If your designer had changed the palettes used on their end in Sketch, developers would have to manually implement those same palettes into their application.

Previous output:

That is no longer necessary, however there is a prerequisite for using this feature. See the below theme plugin section for more.

Indigo.Design Theme Plugin

Along side this release we are also providing a plugin for Sketch to help make theme generation easier on us. This plugin will also make it easier for designers to adjust color palettes in the Indigo.Design Sketch libraries. Designers can read more about how to use the plugin here. For code generation specifically, this plugin will insert some metadata into the Sketch file which we then read in the VS Code extension. This metadata contains information about what palette color and font information should be used for that specific Sketch file. From there we can generate the required SCSS to apply those colors to the generated components. If this plugin is not used to apply a theme then the extension will only generate the default theme.

Note
Previously we had a Sketch plugin called Indigo Sync however this plugin has been merged with this new theme plugin to create a new Indigo.Design Tools plugin. Both plugins can live side by side however the Indigo Sync plugin is no longer necessary. Please use the Indigo.Design Tools plugin from now on.

Applying Themes Globally

One thing to be aware of with these themes is that when they generate they will be scoped to just the generated components. Fortunately it is still very easy to take the generated theme and apply it globally. You can find more information about how to apply themes globally here, however, below you can find a quick example.

The first thing you need to do is open your global SCSS file. The default file that comes with Angular projects is styles.scss. Open this file and add the following SCSS:

// Make sure to replace 'themeName' with the folder name of your
// generated theme.

@import '~igniteui-angular/lib/core/styles/themes/utilities';

// This is the generated _palette.scss file. It has the color
// information for the theme. It also overrides $default-palette.
@import './themes/themeName/palette';

@import '~igniteui-angular/lib/core/styles/themes/index';

@include igx-core();
@include igx-theme($default-palette);

// This is the generated _typography.scss file.
@import './themes/themeName/typography';

The call to igx-theme sets up the themes for all the Ignite UI for Angular components. The last line sets up the typography for the application however you won't see any typography changes in your app until you add the igx-typography CSS class to your HTML. This is usually done on the body tag in index.html.

<body class="igx-typography">
    <app-root></app-root>
</body>

And that's it! Your entire app is now using the generated theme.

Ignite UI CLI

Another feature we added to this release, although very minor, improves the experience when generating into a project created using the Ignite UI CLI. Normally when you create a new project using the Ignite UI CLI it creates a very small demo application within it. In this demo you will see a navigation drawer already provided for you.

This new feature we added will allow code generated components to automatically appear inside this navigation drawer so that you can quickly navigate to the component and view it live. In order to see this feature in action you will first need to enable Basic Routes in the extension settings.

Once this setting is enabled, generate your code into your Angular project that was created using the Ignite UI CLI. Make sure to select AppModule as your target module in the extension dialog. Once code generation is complete you should see a route added to either app.module.ts or app-routing.module.ts if routing modules are used. Now when you run the application you should see your newly generated component displayed inside the Navigation Drawer.

Note
Not shown above but I needed to add width: 100% to the generated component CSS to make it fill horizontally. The Ignite UI CLI project is using flex-box around the router-outlet which doesn't automatically have content fill the space. I just added this to the component css:
:host {
   width: 100%;
}

Conclusion

This latest version of the Indigo.Design Code Generator brings theming your apps to a whole new level making it easier than ever to theme generated components. We are excited to bring these amazing new features to you and hope you are too.