fix qcca base theme

infra-geo-ouverte · Aug 11, 2023 · 8d66f97 · 8d66f97
1 parent c0a82b5
commit 8d66f97
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 117 deletions.
diff --git a/packages/core/src/theming/prebuilt-themes/qcca-theme.scss b/packages/core/src/theming/prebuilt-themes/qcca-theme.scss
@@ -20,7 +20,7 @@ $theme: mat.define-light-theme(
       success: $success,
       background: $background
     ),
-    typography: qcca.$typography,
+    typography: qcca.$typo-typography,
     density: 0
   )
 );
@@ -34,12 +34,14 @@ $theme: map.merge(
 );
 
 @include mat.core();
-@include mat.typography-hierarchy(qcca.$typography);
+@include mat.typography-hierarchy(qcca.$typo-typography);
 @include mat.all-component-themes($theme);
 
 @include igo.all-component-themes($theme);
 @include qcca.all-component-themes($theme);
 
 @media (max-width: 1200px) {
-  @include mat.typography-hierarchy(qcca.$typography-mobile);
+  @include mat.typography-hierarchy(qcca.$typo-typography-mobile);
 }
+
+@include qcca.typo-set-base-styles();
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/base/_index.scss b/packages/core/src/theming/prebuilt-themes/qcca/base/_index.scss
@@ -1,4 +1,4 @@
 @forward './breakpoints';
-@forward './colors';
+@forward './colors' as colors-*;
 @forward './palette';
 @forward './typography';
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/base/colors.scss b/packages/core/src/theming/prebuilt-themes/qcca/base/colors.scss
@@ -1,9 +1,11 @@
+@use 'sass:map';
+
 // https://design.quebec.ca/bases/couleurs#c118192
-$color: (
+$colors: (
   blue: (
     light: #dae6f0,
     light-2: #4a98d9,
-    normal: #1479cc,
+    normal: #1472bf,
     normal-piv: #095797,
     medium: #19406c,
     dark: #223654
@@ -32,3 +34,7 @@ $color: (
     dark: #ad781c
   )
 );
+
+@function get($color, $name) {
+  @return map.get($colors, $color, $name);
+}
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/base/palette.scss b/packages/core/src/theming/prebuilt-themes/qcca/base/palette.scss
@@ -1,28 +1,36 @@
 @use 'sass:map';
+@use 'sass:color';
 @use './colors';
 
+$blue-light: colors.get(blue, light);
+$blue-light-2: colors.get(blue, light-2);
+$blue-normal: colors.get(blue, normal);
+$blue-normal-piv: colors.get(blue, normal-piv);
+$blue-medium: colors.get(blue, medium);
+$blue-dark: colors.get(blue, dark);
+
 // Design Quebec colors
-$primary: map.get(colors.$color, blue, normal-piv);
-$accent: map.get(colors.$color, red, pink);
+$primary: $blue-normal-piv;
+$accent: colors.get(red, pink);
 
-$dark-primary-text: rgba(black, 0.87);
+$dark-primary-text: $blue-dark;
 $light-primary-text: white;
 
 $palette: (
-  50: map.get(colors.$color, blue, light),
-  100: #e5f2fa,
-  200: #99cbec,
-  300: map.get(colors.$color, blue, light-2),
-  400: map.get(colors.$color, blue, normal),
+  50: $blue-light,
+  100: color.adjust($blue-light-2, $lightness: 20%),
+  200: color.adjust($blue-light-2, $lightness: 10%),
+  300: $blue-light-2,
+  400: $blue-normal,
   500: $primary,
-  600: #265b8b,
-  700: map.get(colors.$color, blue, medium),
-  800: #273f61,
-  900: map.get(colors.$color, blue, dark),
-  A100: map.get(colors.$color, blue, normal),
-  A200: map.get(colors.$color, blue, normal),
-  A400: map.get(colors.$color, grey, light-2),
-  A700: map.get(colors.$color, grey, light),
+  600: color.adjust($primary, $lightness: -10%),
+  700: $blue-medium,
+  800: color.adjust($blue-medium, $lightness: -10%),
+  900: $blue-dark,
+  A100: $blue-normal,
+  A200: color.adjust($blue-normal, $lightness: 10%),
+  A400: colors.get(grey, light-2),
+  A700: colors.get(grey, light),
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,

diff --git a/packages/core/src/theming/prebuilt-themes/qcca/base/typography/_index.scss b/packages/core/src/theming/prebuilt-themes/qcca/base/typography/_index.scss
@@ -1,2 +1,2 @@
-@forward './typography';
+@forward './typography' as typo-*;
 @forward './typography.utils';
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/base/typography/typography.scss b/packages/core/src/theming/prebuilt-themes/qcca/base/typography/typography.scss
@@ -38,99 +38,101 @@ $typography-mobile: mat.define-typography-config(
 
 $font-color: map.get(palette.$palette, 900);
 
-body {
-  color: $font-color;
-}
+@mixin set-base-styles {
+  body {
+    color: $font-color;
+  }
 
-a {
-  word-break: break-word;
-  overflow-wrap: break-word;
-  cursor: pointer;
-  color: palette.$primary;
-  text-decoration: underline;
-  background-color: transparent;
-}
+  a {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    color: palette.$primary;
+    text-decoration: underline;
+    background-color: transparent;
+  }
 
-p,
-ul,
-li,
-u,
-.text {
-  color: $font-color;
-  font-size: 16px;
-  line-height: 24px;
-}
+  p,
+  ul,
+  li,
+  u,
+  .text {
+    color: $font-color;
+    font-size: 16px;
+    line-height: 24px;
+  }
 
-p {
-  margin-bottom: 24px;
-}
+  p {
+    margin-bottom: 24px;
+  }
 
-strong {
-  font-weight: 600;
-}
+  strong {
+    font-weight: 600;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  font-family: Roboto, sans-serif !important;
-  color: $font-color;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: Roboto, sans-serif !important;
+    color: $font-color;
+  }
 
-h1 {
-  margin-top: 72px !important;
-  margin-bottom: 32px !important;
+  h1 {
+    margin-top: 72px !important;
+    margin-bottom: 32px !important;
 
-  @include typo-utils.title-border;
+    @include typo-utils.title-border;
 
-  @include breakpoints.media-breakpoint-down(tablet) {
+    @include breakpoints.media-breakpoint-down(tablet) {
+      margin-top: 48px !important;
+      margin-bottom: 16px !important;
+    }
+  }
+
+  h2 {
     margin-top: 48px !important;
     margin-bottom: 16px !important;
   }
-}
 
-h2 {
-  margin-top: 48px !important;
-  margin-bottom: 16px !important;
-}
-
-h3 {
-  margin-top: 24px !important;
-  margin-bottom: 16px !important;
-}
+  h3 {
+    margin-top: 24px !important;
+    margin-bottom: 16px !important;
+  }
 
-// WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
-// https://github.com/angular/components/issues/26351
-h4 {
-  @include typo-utils.title-level-4;
-}
+  // WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
+  // https://github.com/angular/components/issues/26351
+  h4 {
+    @include typo-utils.title-level-4;
+  }
 
-h4 {
-  margin-top: 24px !important;
-  margin-bottom: 8px !important;
-}
+  h4 {
+    margin-top: 24px !important;
+    margin-bottom: 8px !important;
+  }
 
-h5 {
-  font-size: 19px !important;
-  line-height: 24px !important;
-}
+  h5 {
+    font-size: 19px !important;
+    line-height: 24px !important;
+  }
 
-h6 {
-  font-size: 16px !important;
-  line-height: 20px !important;
-}
+  h6 {
+    font-size: 16px !important;
+    line-height: 20px !important;
+  }
 
-h5,
-h6 {
-  font-weight: bold !important;
-  margin-top: 16px !important;
-  margin-bottom: 0px !important;
+  h5,
+  h6 {
+    font-weight: bold !important;
+    margin-top: 16px !important;
+    margin-bottom: 0px !important;
+  }
 }
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/components/button.scss b/packages/core/src/theming/prebuilt-themes/qcca/components/button.scss
@@ -5,8 +5,8 @@
 $color-500: map.get(base.$palette, 500);
 
 .mdc-button {
-  font-size: mat.font-size(base.$typography, body-1) !important;
-  line-height: mat.line-height(base.$typography, body-1) !important;
+  font-size: mat.font-size(base.$typo-typography, body-1) !important;
+  line-height: mat.line-height(base.$typo-typography, body-1) !important;
   font-weight: bold !important;
 }
 

diff --git a/packages/core/src/theming/prebuilt-themes/qcca/components/input.scss b/packages/core/src/theming/prebuilt-themes/qcca/components/input.scss
@@ -2,5 +2,5 @@
 @use '../base';
 
 .mat-mdc-input-element {
-  color: map.get(base.$color, grey, medium) !important;
+  color: base.colors-get(grey, medium) !important;
 }
diff --git a/packages/core/src/theming/prebuilt-themes/qcca/components/search-bar.scss b/packages/core/src/theming/prebuilt-themes/qcca/components/search-bar.scss
@@ -3,21 +3,39 @@
 @use '../base';
 
 igo-search-bar {
-    // Workaroung, OPEN SANS font add a mysterious 1px for the height
-    .mat-mdc-form-field-infix {
-      max-height: 40px;
+  // Workaroung, OPEN SANS font add a mysterious 1px for the height
+  .mat-mdc-form-field-infix {
+    max-height: 40px;
+  }
+
+  button[mat-icon-button] {
+    background-color: map.get(base.$palette, 500);
+
+    &:hover {
+      background-color: map.get(base.$palette, 400);
     }
-
-    button[mat-icon-button] {
-      background-color: map.get(base.$palette, 500);
-
-      &:hover {
-        background-color: map.get(base.$palette, 400);
-      }
+  }
+
+  mat-icon {
+    color: map.get(base.$palette, contrast, 500);
+  }
+}
+
+igo-search-results {
+  igo-collapsible {
+    .mdc-list-item__primary-text {
+      color: base.$blue-dark;
+      font-weight: bold;
     }
+  }
 
-    mat-icon {
-      color: map.get(base.$palette, contrast, 500);
+  igo-search-results-item {
+    .mdc-list-item__primary-text {
+      font-weight: normal;
     }
   }
-
+
+  .mdc-list-item--with-leading-icon .mdc-list-item__start {
+    color: base.$blue-dark;
+  }
+}