feat(styles): added visual css bundle

src/lib/core/_core.scss

@@ -1,11 +1,7 @@
 @import '../../cdk/a11y/a11y';
 
-@import 'styles/normalize';
-@import 'styles/base';
 @import 'styles/typography/all-typography';
 
-// TODO: Create flex layout classes
-// @import 'grid/grid';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mc-core($typography-config: null) {

src/lib/core/styles/common/_size.scss

@@ -0,0 +1,8 @@
+@mixin size($width, $height) {
+    width: $width;
+    height: $height;
+}
+
+@mixin square($size) {
+    @include size($size, $size);
+}

src/lib/core/visual/_all-visual.scss

@@ -0,0 +1,6 @@
+@import './body';
+
+@mixin mosaic-visual() {
+
+    // include specific mixins
+}

src/lib/core/visual/_body.scss

@@ -0,0 +1,46 @@
+@import '../styles/typography/variables';
+@import '../styles/common/size';
+
+
+// HTML & Body reset
+html, body {
+    @include square(100%);
+}
+
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 3. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 4. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box; // 1
+}
+
+html {
+    -webkit-text-size-adjust: 100%; // 2
+    -ms-text-size-adjust: 100%; // 2
+
+    -ms-overflow-style: scrollbar; // 3
+
+    -moz-osx-font-smoothing: grayscale;
+
+    // Helps fonts on OSX looks more consistent with other systems
+    // Isn't currently in button styles due to performance concerns
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+    -webkit-touch-callout: none;
+}
+
+// Body
+//
+// 1. remove the margin in all browsers.
+
+body {
+    font-family: map-get(map-get($fonts, 'base'), font-family);
+    margin: 0; // 1
+}

src/lib/core/visual/prebuilt/default-visual.scss

@@ -0,0 +1,3 @@
+@import '../all-visual';
+
+@include mosaic-visual();

tools/gulp/tasks/mosaic-release.ts

@@ -1,11 +1,12 @@
-import {task, src, dest} from 'gulp';
-import {Bundler} from 'scss-bundle';
+import { mkdirpSync, writeFileSync } from 'fs-extra';
+import { task, src, dest } from 'gulp';
+import { join } from 'path';
+import { Bundler } from 'scss-bundle';
 
+import { buildConfig, sequenceTask } from '../../packages';
+import { composeRelease } from '../../packages/build-release';
 import { mosaicPackage } from '../packages';
-import {composeRelease} from '../../packages/build-release';
-import {buildConfig, sequenceTask} from '../../packages';
-import {join} from "path";
-import {mkdirpSync, writeFileSync} from 'fs-extra';
+
 
 const gulpRename = require('gulp-rename');
 
@@ -15,6 +16,10 @@ const {sourceDir, outputDir} = mosaicPackage;
 /** Path to the directory where all releases are created. */
 const releasesDir = join(distDir, 'releases');
 
+// Matches all SCSS files in the different packages.
+const allScssGlob = join(buildConfig.packagesDir, '**/*.scss');
+
+
 // Path to the release output of mosaic.
 const releasePath = join(releasesDir, 'mosaic');
 // The entry-point for the scss theming bundle.
@@ -23,15 +28,20 @@ const themingEntryPointPath = join(sourceDir, 'core', 'theming', '_all-theme.scs
 const themingBundlePath = join(releasePath, '_theming.scss');
 // Matches all pre-built theme css files
 const prebuiltThemeGlob = join(outputDir, '**/theming/prebuilt/*.css?(.map)');
-// Matches all SCSS files in the different packages.
-const allScssGlob = join(buildConfig.packagesDir, '**/*.scss');
 
 
+const visualEntryPointPath = join(sourceDir, 'core', 'visual', '_all-visual.scss');
+const prebuiltVisualGlob = join(outputDir, '**/visual/prebuilt/*.css?(.map)');
+const visualBundlePath = join(releasePath, '_visual.scss');
+
 task('mosaic:build-release', ['mosaic:prepare-release'], () => composeRelease(mosaicPackage));
 
 task('mosaic:prepare-release', sequenceTask(
     'mosaic:build',
-    ['mosaic:copy-prebuilt-themes', 'mosaic:bundle-theming-scss']
+    [
+        'mosaic:copy-prebuilt-themes', 'mosaic:bundle-theming-scss',
+        'mosaic:copy-prebuilt-visual', 'mosaic:bundle-visual-scss'
+    ]
 ));
 
 task('mosaic:copy-prebuilt-themes', () => {
@@ -45,10 +55,29 @@ task('mosaic:bundle-theming-scss', () => {
     // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
     // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
     // array of globs, which will match SCSS files that will be only included once in the bundle.
-    return new Bundler().Bundle(themingEntryPointPath, [allScssGlob]).then(result => {
+    return new Bundler().Bundle(themingEntryPointPath, [allScssGlob]).then((result) => {
         // The release directory is not created yet because the composing of the release happens when
         // this task finishes.
         mkdirpSync(releasePath);
         writeFileSync(themingBundlePath, result.bundledContent);
     });
 });
+
+
+task('mosaic:copy-prebuilt-visual', () => {
+    src(prebuiltVisualGlob)
+        .pipe(gulpRename({dirname: ''}))
+        .pipe(dest(join(releasePath, 'prebuilt-visual')));
+});
+
+task('mosaic:bundle-visual-scss', () => {
+    // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
+    // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
+    // array of globs, which will match SCSS files that will be only included once in the bundle.
+    return new Bundler().Bundle(visualEntryPointPath, [allScssGlob]).then((result) => {
+        // The release directory is not created yet because the composing of the release happens when
+        // this task finishes.
+        mkdirpSync(releasePath);
+        writeFileSync(visualBundlePath, result.bundledContent);
+    });
+});