feat(ui): add material theming

packages/stark-ui/assets/themes/_app-logo-theme.scss

@@ -0,0 +1,14 @@
+// Import all the tools needed to customize the theme and extract parts of it
+@import "~@angular/material/theming";
+
+// Define a mixin that accepts a theme and outputs the color styles for the component.
+@mixin nbb-logo-theme($theme, $button-vars) {
+  // Extract whichever individual palettes you need from the theme.
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+
+  // Use mat-color to extract individual colors from a palette as necessary.
+  .stark-app-logo .mat-card {
+    border-color: mat-color($accent, A400);
+  }
+}

packages/stark-ui/assets/themes/_button-theme.scss

@@ -0,0 +1,26 @@
+@mixin stark-button-theme($theme) {
+  button[mat-raised-button],
+  a[mat-raised-button] {
+    border-radius: map-get($theme, border-radius);
+    /*padding: map-get($theme, padding);
+    line-height: map-get($theme, line-height);*/
+  }
+
+  button[mat-raised-button].stark-small-button,
+  a[mat-raised-button].stark-small-button {
+    font-size: map-get($theme, small-font-size);
+    font-weight: map-get($theme, small-font-weight);
+    line-height: map-get($theme, small-line-height);
+    min-width: map-get($theme, small-min-width);
+    padding: map-get($theme, small-padding);
+  }
+
+  button[mat-raised-button].stark-large-button,
+  a[mat-raised-button].stark-large-button {
+    font-size: map-get($theme, large-font-size);
+    font-weight: map-get($theme, large-font-weight);
+    line-height: map-get($theme, large-line-height);
+    min-width: map-get($theme, large-min-width);
+    padding: map-get($theme, large-padding);
+  }
+}

packages/stark-ui/assets/themes/_card-theme.scss

@@ -0,0 +1,5 @@
+@mixin stark-card-theme($theme) {
+  mat-card.mat-card {
+    border-radius: map-get($theme, border-radius);
+  }
+}

packages/stark-ui/assets/themes/_table-theme.scss

@@ -0,0 +1,5 @@
+@mixin stark-table-theme($theme) {
+  .stark-table table {
+    border-radius: map-get($theme, border-radius);
+  }
+}

packages/stark-ui/assets/themes/_theming.scss

@@ -0,0 +1,53 @@
+@import "~@angular/material/theming";
+
+//Vars
+$border-radius: 2px;
+
+//Colors
+$stark-color-theme: mat-light-theme(mat-palette($mat-blue), mat-palette($mat-green), mat-palette($mat-red)) !default;
+@include angular-material-theme($stark-color-theme);
+
+//Button
+@import "button-theme";
+$button-theme: (
+  border-radius: $border-radius,
+  font-size: 14px,
+  font-weight: 500,
+  line-height: 36px,
+  padding: 0 16px,
+  small-font-size: 12px,
+  small-font-weight: 500,
+  small-line-height: 26px,
+  small-min-width: 50px,
+  small-padding: 0 5px,
+  large-font-size: 30px,
+  large-font-weight: 500,
+  large-line-height: 52px,
+  large-min-width: 88px,
+  large-padding: 0 20px
+);
+@if variable-exists(stark-button-theme) {
+  $button-theme: map-merge($button-theme, $stark-button-theme);
+}
+@include stark-button-theme($button-theme);
+
+//Card
+@import 'card-theme';
+$card-theme: (
+  border-radius: $border-radius
+);
+@include stark-card-theme($card-theme);
+
+//Table
+@import "table-theme";
+$table-theme: (
+  border-radius: $border-radius
+);
+@if variable-exists(stark-table-theme) {
+  $table-theme: map-merge($table-theme, $stark-table-theme);
+}
+@include stark-table-theme($table-theme);
+
+//Fonts
+@import "typography-theme";
+@include mat-core($typography-config);

packages/stark-ui/assets/themes/_typography-theme.scss

@@ -0,0 +1,42 @@
+@function mat-typography-level-create($list) {
+  @return mat-typography-level(nth($list, 1), nth($list, 2), nth($list, 3));
+}
+
+//font-size, line-height, font-weight
+$typography-theme: (
+  font-family: 'Roboto, "Helvetica Neue", sans-serif',
+  display-4: (112px, 112px, 300),
+  display-3: (56px, 56px, 400),
+  display-2: (45px, 48px, 400),
+  display-1: (34px, 40px, 400),
+  headline: (24px, 32px, 400),
+  title: (20px, 32px, 500),
+  subheading-2: (16px, 28px, 400),
+  subheading-1: (15px, 24px, 400),
+  body-2: (14px, 24px, 500),
+  body-1: (14px, 20px, 400),
+  caption: (12px, 20px, 400),
+  button: (map-get($button-theme, font-size), map-get($button-theme, line-height), map-get($button-theme, font-weight)),
+  /* Line-height must be unit-less fraction of the font-size.*/ input: (inherit, 1.125, 400)
+);
+
+@if variable-exists(stark-typography-theme) {
+  $typography-theme: map-merge($typography-theme, $stark-typography-theme);
+}
+
+$typography-config: mat-typography-config(
+  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
+  $display-4: mat-typography-level-create(map-get($typography-theme, display-4)),
+  $display-3: mat-typography-level-create(map-get($typography-theme, display-3)),
+  $display-2: mat-typography-level-create(map-get($typography-theme, display-2)),
+  $display-1: mat-typography-level-create(map-get($typography-theme, display-1)),
+  $headline: mat-typography-level-create(map-get($typography-theme, headline)),
+  $title: mat-typography-level-create(map-get($typography-theme, title)),
+  $subheading-2: mat-typography-level-create(map-get($typography-theme, subheading-2)),
+  $subheading-1: mat-typography-level-create(map-get($typography-theme, subheading-1)),
+  $body-2: mat-typography-level-create(map-get($typography-theme, body-2)),
+  $body-1: mat-typography-level-create(map-get($typography-theme, body-1)),
+  $caption: mat-typography-level-create(map-get($typography-theme, caption)),
+  $button: mat-typography-level-create(map-get($typography-theme, button)),
+  /* Line-height must be unit-less fraction of the font-size.*/ $input: mat-typography-level-create(map-get($typography-theme, input))
+);

showcase/package.json

@@ -113,14 +113,15 @@
     "@angular/compiler": "6.0.4",
     "@angular/compiler-cli": "6.0.4",
     "@angular/core": "6.0.4",
+    "@angular/flex-layout": "^6.0.0-beta.15",
     "@angular/forms": "6.0.4",
     "@angular/material": "6.2.1",
     "@angular/platform-browser": "6.0.4",
     "@angular/platform-browser-dynamic": "6.0.4",
     "@angular/platform-server": "6.0.4",
     "@angular/router": "6.0.4",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-e075cf5.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-e075cf5.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-2c723cb.tgz",
+    "@nationalbankbelgium/stark-ui": "../packages/stark-ui",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",
@@ -135,8 +136,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-18ddc7a.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-2c723cb.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-2c723cb.tgz",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",

showcase/src/styles/_theme.scss

@@ -0,0 +1,43 @@
+@import "~@angular/material/theming";
+
+//use stark prefix
+/*$color-primary: mat-palette($mat-pink, 500, 900, 50);
+$color-accent: mat-palette($mat-pink, 400);
+$color-warn: mat-palette($mat-red, 900);
+$stark-color-theme: mat-light-theme($color-primary, $color-accent, $color-warn);*/
+
+//Theme shared components
+$border-radius: 2px;
+
+//font-size, line-height, font-weight
+/*$stark-typography-theme: (
+  font-family: '"Oswald", sans-serif',
+  headline: (90px, 48px, 400),
+  body-1: (14px, 20px, 400),
+  body-2: (14px, 24px, 500),
+  caption: (12px, 20px, 400)
+);*/
+
+$stark-button-theme: (
+  border-radius: $border-radius,
+  font-size: 14px,
+  font-weight: 500,
+  line-height: 36px,
+  padding: 0 16px,
+  small-font-size: 12px,
+  small-font-weight: 500,
+  small-line-height: 26px,
+  small-min-width: 50px,
+  small-padding: 0 5px,
+  large-font-size: 30px,
+  large-font-weight: 500,
+  large-line-height: 52px,
+  large-min-width: 88px,
+  large-padding: 0 20px
+);
+
+$stark-table-theme: (
+  border-radius: $border-radius
+);
+
+@import "~@nationalbankbelgium/stark-ui/assets/themes/theming";

showcase/src/styles/styles.pcss

@@ -3,7 +3,5 @@ IMPORTANT: Stark styles are provided as PostCSS styles so they should be importe
 */
 
 /* Stark variables */
-@import "../../node_modules/@nationalbankbelgium/stark-ui/assets/styles/_variables.pcss";
 
 /* Stark components */
-@import "../../node_modules/@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component.pcss";

showcase/src/styles/styles.scss

@@ -1,4 +1,3 @@
 /* this file will be extracted to main dist folder and is imported in index.html */
 /* This file is for setting global styles  */
-
-@import "variables";
+@import "theme";

showcase/tsconfig.json

@@ -8,6 +8,7 @@
     "typeRoots": ["./node_modules/@types"],
     "paths": {
       "@angular/*": ["../node_modules/@angular/*"],
+      "@nationalbankbelgium/stark-ui": ["../../packages/stark-ui/index.ts"],
       "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"]
     }
   },

starter/package.json

@@ -125,7 +125,7 @@
     "@angular/platform-server": "6.0.4",
     "@angular/router": "6.0.4",
     "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-e40780b.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-e40780b.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-11f4fbc.tgz",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",

starter/src/styles/styles.pcss

@@ -1,9 +1,3 @@
 /*
 IMPORTANT: Stark styles are provided as PostCSS styles so they should be imported in a PCSS file!
 */
-
-/* Stark variables */
-@import "../../node_modules/@nationalbankbelgium/stark-ui/assets/styles/_variables.pcss";
-
-/* Stark components */
-@import "../../node_modules/@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component.pcss";