feat(font): add topography config

infra-geo-ouverte · Oct 30, 2019 · 2cef056 · 2cef056
1 parent c0015e8
commit 2cef056
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,5 +4,4 @@ @@
       mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-header {
         color: mat-color($primary);
       }
     }