From 2cef0563ddff339b9ab5871afacbb2f4d1191e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Barbeau?=
 <marc-andre.barbeau@msp.gouv.qc.ca>
Date: Wed, 30 Oct 2019 15:31:12 -0400
Subject: [PATCH] feat(font): add topography config

---
 packages/common/src/style/common.theming.scss |  2 +-
 packages/core/src/style/all.theming.scss      |  9 ++++---
 packages/core/src/style/core.theming.scss     |  2 +-
 packages/core/src/style/foreground.scss       | 20 ++++++++++++++
 .../core/src/style/themes/blue.theme.scss     |  2 +-
 packages/core/src/style/theming.scss          | 27 +++----------------
 packages/core/src/style/typography.scss       | 15 +++++++++++
 .../geo/src/lib/filter/filter.theming.scss    |  2 +-
 .../time-filter-form.component.scss           |  7 +----
 .../time-filter-form.theming.scss             |  1 -
 .../geo/src/lib/measure/measure.theming.scss  |  4 +--
 .../measure/measurer/measurer.component.scss  |  1 -
 .../measure/measurer/measurer.theming.scss    |  4 +--
 .../print-form/print-form.component.scss      |  1 -
 packages/geo/src/style/geo.theming.scss       |  6 ++---
 15 files changed, 55 insertions(+), 48 deletions(-)
 create mode 100644 packages/core/src/style/foreground.scss
 create mode 100644 packages/core/src/style/typography.scss

diff --git a/packages/common/src/style/common.theming.scss b/packages/common/src/style/common.theming.scss
index 4fb731e405..261bdcc334 100644
--- a/packages/common/src/style/common.theming.scss
+++ b/packages/common/src/style/common.theming.scss
@@ -5,7 +5,7 @@
 @import '../lib/panel/panel.theming';
 @import '../lib/tool/tool.theming';
 
-@mixin igo-common-theming($theme) {
+@mixin igo-common-theming($theme, $typography) {
   @include igo-action-theming($theme);
   @include igo-collapsible-theming($theme);
   @include igo-entity-theming($theme);
diff --git a/packages/core/src/style/all.theming.scss b/packages/core/src/style/all.theming.scss
index 19b090118b..7c9c4a09ab 100644
--- a/packages/core/src/style/all.theming.scss
+++ b/packages/core/src/style/all.theming.scss
@@ -1,9 +1,10 @@
 @import './theming';
+@import './typography';
 @import '../../../common/src/style/common.theming';
 @import '../../../geo/src/style/geo.theming';
 
-@mixin igo-all-theming($theme) {
-  @include igo-theming($theme);
-  @include igo-common-theming($theme);
-  @include igo-geo-theming($theme);
+@mixin igo-all-theming($theme, $typography: $igo-typography) {
+  @include igo-theming($theme, $typography);
+  @include igo-common-theming($theme, $typography);
+  @include igo-geo-theming($theme, $typography);
 }
diff --git a/packages/core/src/style/core.theming.scss b/packages/core/src/style/core.theming.scss
index 070660cc96..19f6e42134 100644
--- a/packages/core/src/style/core.theming.scss
+++ b/packages/core/src/style/core.theming.scss
@@ -1,5 +1,5 @@
 @import '../lib/message/message.theming';
 
-@mixin igo-core-theming($theme) {
+@mixin igo-core-theming($theme, $typography) {
   @include igo-message-theming($theme);
 }
diff --git a/packages/core/src/style/foreground.scss b/packages/core/src/style/foreground.scss
new file mode 100644
index 0000000000..52fe699f6e
--- /dev/null
+++ b/packages/core/src/style/foreground.scss
@@ -0,0 +1,20 @@
+@function theme-foreground($palette) {
+    $color: mat-color($palette);
+    @return (
+        base:              $color,
+        divider:           rgba($color, 0.12),
+        dividers:          rgba($color, 0.12),
+        disabled:          rgba($color, 0.38),
+        disabled-button:   rgba($color, 0.26),
+        disabled-text:     rgba($color, 0.38),
+        elevation:         $color,
+        hint-text:         rgba($color, 0.38),
+        secondary-text:    rgba($color, 0.54),
+        icon:              rgba($color, 0.54),
+        icons:             rgba($color, 0.54),
+        text:              rgba($color, 0.87),
+        slider-min:        rgba($color, 0.87),
+        slider-off:        rgba($color, 0.26),
+        slider-off-active: rgba($color, 0.38)
+    );
+};
diff --git a/packages/core/src/style/themes/blue.theme.scss b/packages/core/src/style/themes/blue.theme.scss
index c9a1e431a1..f240bb7ee6 100644
--- a/packages/core/src/style/themes/blue.theme.scss
+++ b/packages/core/src/style/themes/blue.theme.scss
@@ -1,4 +1,4 @@
-@import '../theming';
+@import '../foreground';
 
 $primary: mat-palette($mat-blue, 700, 400, 900);
 $accent: mat-palette($mat-blue, 200);
diff --git a/packages/core/src/style/theming.scss b/packages/core/src/style/theming.scss
index ac08e8cbe6..aa74b96502 100644
--- a/packages/core/src/style/theming.scss
+++ b/packages/core/src/style/theming.scss
@@ -3,30 +3,9 @@
 @import './material.font';
 @import './core.theming';
 
-@mixin igo-theming($theme) {
-  @include mat-core();
+@mixin igo-theming($theme, $typography) {
+  @include mat-core($typography);
   @include angular-material-theme($theme);
 
-  @include igo-core-theming($theme);
+  @include igo-core-theming($theme, $typography);
 }
-
-
-@function theme-foreground($palette) {
-    $color: mat-color($palette);
-    @return (
-        base:              $color,
-        divider:           $white-12-opacity,
-        dividers:          $white-12-opacity,
-        disabled:          rgba($color, 0.38),
-        disabled-button:   rgba($color, 0.38),
-        disabled-text:     rgba($color, 0.38),
-        hint-text:         rgba($color, 0.38),
-        secondary-text:    rgba($color, 0.54),
-        icon:              rgba($color, 0.54),
-        icons:             rgba($color, 0.54),
-        text:              rgba($color, 0.87),
-        slider-off:        rgba($color, 0.26),
-        slider-off-active: rgba($color, 0.38),
-        slider-min:        rgba($color, 0.38)
-    );
-};
diff --git a/packages/core/src/style/typography.scss b/packages/core/src/style/typography.scss
new file mode 100644
index 0000000000..0694b0e413
--- /dev/null
+++ b/packages/core/src/style/typography.scss
@@ -0,0 +1,15 @@
+$igo-typography: mat-typography-config(
+  $display-4:     mat-typography-level(110px, 110px, 300),
+  $display-3:     mat-typography-level(54px, 54px, 400),
+  $display-2:     mat-typography-level(43px, 46px, 400),
+  $display-1:     mat-typography-level(32px, 38px, 400),
+  $headline:      mat-typography-level(22px, 30px, 400),
+  $title:         mat-typography-level(18px, 30px, 500),
+  $subheading-2:  mat-typography-level(14px, 26px, 400),
+  $subheading-1:  mat-typography-level(13px, 22px, 400),
+  $body-2:        mat-typography-level(12px, 22px, 500),
+  $body-1:        mat-typography-level(12px, 18px, 400),
+  $caption:       mat-typography-level(12px, 18px, 400),
+  $button:        mat-typography-level(13px, 13px, 500),
+  $input:         mat-typography-level(14px, 1.25, 400)
+);
diff --git a/packages/geo/src/lib/filter/filter.theming.scss b/packages/geo/src/lib/filter/filter.theming.scss
index ca8efd96fa..c28e15ae16 100644
--- a/packages/geo/src/lib/filter/filter.theming.scss
+++ b/packages/geo/src/lib/filter/filter.theming.scss
@@ -1,5 +1,5 @@
 @import './time-filter-form/time-filter-form.theming';
 
-@mixin igo-filter-theming($theme) {
+@mixin igo-filter-theming($theme, $typography) {
   @include igo-time-filter-form-theming($theme);
 }
diff --git a/packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.scss b/packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.scss
index 207e82b953..22efad9324 100644
--- a/packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.scss
+++ b/packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.scss
@@ -12,7 +12,7 @@ mat-slider >>> div.mat-slider-thumb-label {
 }
 
 mat-slider >>> span.mat-slider-thumb-label-text {
-  font-size: 8px;
+  font-size: 10px;
 }
 
 #time-slider {
@@ -25,11 +25,6 @@ mat-slider >>> span.mat-slider-thumb-label-text {
   }
 }
 
-#playFilterIcon {
-  font-size: 32px;
-  cursor: pointer;
-}
-
 .date-below {
   margin: 0;
 }
diff --git a/packages/geo/src/lib/filter/time-filter-form/time-filter-form.theming.scss b/packages/geo/src/lib/filter/time-filter-form/time-filter-form.theming.scss
index df39e36904..ca9e2c8e9f 100644
--- a/packages/geo/src/lib/filter/time-filter-form/time-filter-form.theming.scss
+++ b/packages/geo/src/lib/filter/time-filter-form/time-filter-form.theming.scss
@@ -4,5 +4,4 @@
   mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-header {
     color: mat-color($primary);
   }
-
 }
diff --git a/packages/geo/src/lib/measure/measure.theming.scss b/packages/geo/src/lib/measure/measure.theming.scss
index 7aca4d4d57..1b41083677 100644
--- a/packages/geo/src/lib/measure/measure.theming.scss
+++ b/packages/geo/src/lib/measure/measure.theming.scss
@@ -1,5 +1,5 @@
 @import './measurer/measurer.theming';
 
-@mixin igo-measure-theming($theme) {
-  @include igo-measurer-theming($theme);
+@mixin igo-measure-theming($theme, $typography) {
+  @include igo-measurer-theming($theme, $typography);
 }
diff --git a/packages/geo/src/lib/measure/measurer/measurer.component.scss b/packages/geo/src/lib/measure/measurer/measurer.component.scss
index 11431243ab..5c9d3f123d 100644
--- a/packages/geo/src/lib/measure/measurer/measurer.component.scss
+++ b/packages/geo/src/lib/measure/measurer/measurer.component.scss
@@ -23,7 +23,6 @@ $slide-toggle-width: 60px;
 
     ::ng-deep .mat-slide-toggle-content {
       width: calc(100% - #{$slide-toggle-width});
-      font-size: 16px;
     }
   }
 }
diff --git a/packages/geo/src/lib/measure/measurer/measurer.theming.scss b/packages/geo/src/lib/measure/measurer/measurer.theming.scss
index b2407b7e3c..660ba47753 100644
--- a/packages/geo/src/lib/measure/measurer/measurer.theming.scss
+++ b/packages/geo/src/lib/measure/measurer/measurer.theming.scss
@@ -1,4 +1,4 @@
-@mixin igo-measurer-theming($theme) {
+@mixin igo-measurer-theming($theme, $typography) {
   $foreground: map-get($theme, foreground);
 
   .igo-map-tooltip {
@@ -13,6 +13,6 @@
     border: 1px solid rgb(255, 205, 51);
     color: mat-color($foreground, text);
     font-weight: bold;
-    font-size: 14px;
+    font-size: mat-font-size($typography, subheading-2);
   }
 }
diff --git a/packages/geo/src/lib/print/print-form/print-form.component.scss b/packages/geo/src/lib/print/print-form/print-form.component.scss
index 993b24cb33..5fc016f5f6 100644
--- a/packages/geo/src/lib/print/print-form/print-form.component.scss
+++ b/packages/geo/src/lib/print/print-form/print-form.component.scss
@@ -15,7 +15,6 @@ mat-form-field {
 
     ::ng-deep .mat-slide-toggle-content {
       width: calc(100% - #{$slide-toggle-width});
-      font-size: 16px;
     }
   }
 }
diff --git a/packages/geo/src/style/geo.theming.scss b/packages/geo/src/style/geo.theming.scss
index 6b5b161e02..f0b676a3f5 100644
--- a/packages/geo/src/style/geo.theming.scss
+++ b/packages/geo/src/style/geo.theming.scss
@@ -6,10 +6,10 @@
 @import '../lib/measure/measure.theming';
 @import '../lib/routing/routing.theming';
 
-@mixin igo-geo-theming($theme) {
+@mixin igo-geo-theming($theme, $typography) {
   @include igo-feature-theming($theme);
-  @include igo-filter-theming($theme);
+  @include igo-filter-theming($theme, $typography);
   @include igo-map-theming($theme);
-  @include igo-measure-theming($theme);
+  @include igo-measure-theming($theme, $typography);
   @include igo-routing-theming($theme);
 }