fix: issue where dialog text was blurry

 - update mixins and typography styles from 1.0 angular material.
 - add md-title class to basic dialog title.

ng2-material/components/dialog/dialog_basic.ts

@@ -8,7 +8,7 @@ import {Input} from "angular2/core";
 @Component({selector: 'md-dialog-basic'})
 @View({
   template: `
-  <h2>{{ title }}</h2>
+  <h2 class="md-title">{{ title }}</h2>
   <p>{{ textContent }}</p>
   <md-dialog-actions>
     <button md-button *ngIf="cancel != ''" type="button" (click)="dialog.close(false)">

ng2-material/core/style/mixins.scss

@@ -16,11 +16,11 @@
 
 @mixin input-placeholder-color($color) {
   &::-webkit-input-placeholder,
-  &::-moz-placeholder, /* Firefox 19+ */
-  &:-moz-placeholder, /* Firefox 18- */
-  &:-ms-input-placeholder {
-    color: $color;
-  }
+    &::-moz-placeholder,
+    &:-moz-placeholder,
+    &:-ms-input-placeholder {
+      color: $color;
+    }
 }
 
 @mixin pie-clearfix {
@@ -31,6 +31,60 @@
   }
 }
 
+@mixin md-shadow-bottom-z-1() {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+@mixin md-shadow-bottom-z-2() {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+}
+
+// Mixin for a "flat" input that can be used for components that contain an input
+// (datepicker, autocomplete).
+@mixin md-flat-input() {
+  font-size: 14px;
+
+  box-sizing: border-box;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background: transparent;
+
+  // The the "clear X" that IE adds to input[type="search"]
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+// Typography mixins
+
+@mixin md-title() {
+  font-size: $title-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+}
+
+@mixin md-body-1() {
+  font-size: $body-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: rem(2);
+}
+
+@mixin md-body-2() {
+  font-size: $body-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.010em;
+  line-height: rem(2.4);
+}
+
+@mixin md-subhead() {
+  font-size: $subhead-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: rem(2.4);
+}
+
 @function map-to-string($map) {
   $map-str: '{';
   $keys: map-keys($map);
@@ -47,10 +101,29 @@
 }
 
 
-/* mixin definition ; sets LTR and RTL within the same style call */
+// mixin definition ; sets LTR and RTL within the same style call
+// @see https://css-tricks.com/almanac/properties/d/direction/
+
 @mixin rtl($prop, $value, $rtl-value) {
   #{$prop}: $value;
+
   html[dir=rtl] & {
     #{$prop}: $rtl-value;
+    unicode-bidi: embed;
   }
+  body[dir=rtl] & {
+    #{$prop}: $rtl-value;
+    unicode-bidi: embed;
+  }
+
+  bdo[dir=rtl] {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+  bdo[dir=ltr] {
+    direction: ltr;
+    unicode-bidi: bidi-override;
+  }
+
+
 }

ng2-material/core/style/typography.scss

@@ -1,13 +1,26 @@
+// Global page styles
+//
+// [2] Ensure the page always fills at least the entire height of the viewport.
+// [3] Prevent iOS text size adjust after orientation change, without disabling user zoom
+// [4] Fonts on OSX will look more consistent with other systems that do not
+// render text using sub-pixel anti-aliasing.
+
 html, body {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
+
+  min-height: 100%; // [2]
+
+  -webkit-text-size-adjust: 100%; // [3]
+  -ms-text-size-adjust: 100%; // [3]
+
+  -webkit-font-smoothing: antialiased; // [4]
+  -moz-osx-font-smoothing: grayscale; // [4]
 }
 
 md-select, md-card, md-list, md-toolbar,
 ul, ol, p, h1, h2, h3, h4, h5, h6 {
-  text-rendering: optimizeLegibility;
+  //text-rendering: optimizeLegibility;
 }
 
 /************
@@ -41,30 +54,19 @@ ul, ol, p, h1, h2, h3, h4, h5, h6 {
   line-height: rem(3.2);
 }
 .md-title {
-  font-size: $title-font-size-base;
-  font-weight: 500;
-  letter-spacing: 0.005em;
+  @include md-title();
 }
 .md-subhead {
-  font-size: $subhead-font-size-base;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: rem(2.4);
+  @include md-subhead();
 }
 /************
  * Body Copy
  ************/
 .md-body-1 {
-  font-size: $body-font-size-base;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: rem(2);
+  @include md-body-1();
 }
 .md-body-2 {
-  font-size: $body-font-size-base;
-  font-weight: 500;
-  letter-spacing: 0.010em;
-  line-height: rem(2.4);
+  @include md-body-2();
 }
 .md-caption {
   font-size: $caption-font-size-base;