@igo2/sdg-core 1.0.0-next.60

package/src/style/_index.scss

@@ -0,0 +1 @@
+@forward './overrides';

package/src/style/overrides/_index.scss

@@ -0,0 +1,2 @@
+@forward './igo2-lib';
+@forward './material';

package/src/style/overrides/igo2-lib/_index-theme.scss

@@ -0,0 +1,13 @@
+@use './search-bar-theme' as search-bar;
+
+@mixin themes($theme) {
+  @include search-bar.theme($theme);
+}
+
+@mixin colors($theme) {
+  @include search-bar.color($theme);
+}
+
+@mixin densities($theme) {
+  @include search-bar.density($theme);
+}

package/src/style/overrides/igo2-lib/_index.scss

@@ -0,0 +1,6 @@
+@use './list';
+@use './panel';
+@use './search-bar';
+@use './scrollbar';
+
+@forward './index-theme' as override-igo2-lib-*;

package/src/style/overrides/igo2-lib/_search-bar-theme.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include color($theme);
+  @include density($theme);
+}
+
+@mixin color($theme) {
+}
+
+@mixin density($theme) {
+  $density: mat.m2-get-density-config($theme);
+
+  $theme4: map.merge(
+    $theme,
+    (
+      density: $density - 4
+    )
+  );
+
+  $theme2: map.merge(
+    $theme,
+    (
+      density: $density - 2
+    )
+  );
+
+  igo-search-bar {
+    @include mat.form-field-density($theme4);
+    @include mat.icon-button-density($theme2);
+  }
+}

package/src/style/overrides/igo2-lib/list.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../theme/palettes';
+
+// TODO rework this style to be more generic
+
+igo-search-results-item {
+  .mdc-list-item__primary-text {
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: unset !important;
+    line-height: 18px !important;
+  }
+}
+
+igo-list [igolistitem][color='accent'].igo-list-item-selected > mat-list-item {
+  background-color: map.get(palettes.$primary-palette, 400);
+
+  h4,
+  small {
+    color: map.get(palettes.$primary-palette, contrast, 500) !important;
+  }
+}

package/src/style/overrides/igo2-lib/panel.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../../../theme/palettes';
+
+.igo-panel-header,
+.igo-panel-header button,
+.igo-panel-title {
+  color: map.get(palettes.$primary-palette, contrast, 500) !important;
+}

package/src/style/overrides/igo2-lib/scrollbar.scss

@@ -0,0 +1,15 @@
+// @use '../base';
+
+// *::-webkit-scrollbar {
+//   width: 6px;
+// }
+
+// *::-webkit-scrollbar-track {
+//   box-shadow: inset 0 0 5px base.$blue-pale;
+//   border-radius: 10px;
+// }
+
+// *::-webkit-scrollbar-thumb {
+//   background: base.$blue-piv;
+//   border-radius: 10px;
+// }

package/src/style/overrides/igo2-lib/search-bar.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@angular/material' as mat;
+@use '../../../theme/colors';
+@use '../../../theme/palettes';
+
+igo-search-bar {
+  // 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: colors.$blue-piv;
+
+    &:hover {
+      background-color: color.adjust(colors.$blue-piv, $lightness: 5%);
+    }
+  }
+
+  mat-icon {
+    color: map.get(palettes.$primary-palette, contrast, 500);
+  }
+}
+
+igo-search-results {
+  igo-collapsible {
+    .mdc-list-item__primary-text {
+      color: colors.$blue-dark;
+      font-weight: bold;
+    }
+  }
+
+  igo-search-results-item {
+    .mdc-list-item__primary-text {
+      font-weight: normal;
+    }
+  }
+
+  .mdc-list-item--with-leading-icon .mdc-list-item__start {
+    color: colors.$blue-dark;
+  }
+}

package/src/style/overrides/material/_button-theme.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use '../../../typography';
+
+@mixin theme($theme) {
+  @include color($theme);
+  @include density($theme);
+  @include typography($theme);
+}
+
+@mixin color($theme) {
+  $primary: map.get($theme, primary);
+
+  .mat-mdc-outlined-button {
+    border-color: currentColor !important;
+  }
+}
+
+@mixin density($theme) {
+  .mdc-button {
+    --mdc-text-button-container-height: 56px;
+    --mdc-outlined-button-container-height: 56px;
+    --mdc-protected-button-container-height: 56px;
+    --mdc-filled-button-container-height: 56px;
+    min-width: calc(56px * 2) !important;
+  }
+
+  .mat-mdc-outlined-button {
+    border-width: 2px !important;
+
+    &[compact] {
+      border-width: 1px !important;
+    }
+  }
+
+  .mdc-button[compact] {
+    $theme: map.merge(
+      $theme,
+      (
+        density: 0
+      )
+    );
+    @include mat.button-density($theme);
+  }
+
+  .mdc-icon-button[compact] {
+    // Workaround the @include doesn't work for the icon button, the style is overriden
+    // $theme: map.merge($theme, (density: -2));
+    // @include mat.icon-button-density($theme);
+    --mdc-icon-button-state-layer-size: 40px;
+    width: var(--mdc-icon-button-state-layer-size);
+    height: var(--mdc-icon-button-state-layer-size);
+    padding: 8px;
+  }
+}
+
+@mixin typography($theme) {
+  .mdc-button {
+    --mdc-text-button-label-text-weight: bold;
+    --mdc-outlined-button-label-text-weight: bold;
+    --mdc-protected-button-label-text-weight: bold;
+    --mdc-filled-button-label-text-weight: bold;
+
+    $font-size: mat.m2-font-size(typography.$typography, body-1);
+
+    --mdc-filled-button-label-text-size: $font-size;
+    --mdc-text-button-label-text-size: $font-size;
+    --mdc-outlined-button-label-text-size: $font-size;
+    --mdc-protected-button-label-text-size: $font-size;
+
+    line-height: mat.m2-line-height(typography.$typography, body-1) !important;
+  }
+}

package/src/style/overrides/material/_index-theme.scss

@@ -0,0 +1,13 @@
+@use './button-theme' as button;
+
+@mixin themes($theme) {
+  @include button.theme($theme);
+}
+
+@mixin colors($theme) {
+  @include button.color($theme);
+}
+
+@mixin densities($theme) {
+  @include button.density($theme);
+}

package/src/style/overrides/material/_index.scss

@@ -0,0 +1,6 @@
+@use './button';
+@use './dialog';
+@use './form-field';
+@use './input';
+
+@forward './index-theme' as override-material-*;

package/src/style/overrides/material/button.scss

@@ -0,0 +1,5 @@
+@use '@angular/material' as mat;
+
+.mat-mdc-button-base {
+  border-radius: 0 !important;
+}

package/src/style/overrides/material/dialog.scss

@@ -0,0 +1,36 @@
+@use '../../../typography';
+
+.mdc-dialog {
+  max-width: 600px;
+
+  &__surface {
+    border-radius: 0 !important;
+  }
+
+  &__title {
+    padding-top: 8px !important; // Workaround, this should be 32px but Material apply a default height for the title.
+    padding-bottom: 24px !important;
+
+    @include typography.title-level-4;
+    @include typography.title-border;
+  }
+
+  &__tile,
+  &__content,
+  &__actions {
+    padding-left: 32px !important;
+    padding-right: 32px !important;
+  }
+
+  &__actions {
+    padding-top: 24px !important;
+    padding-bottom: 32px !important;
+  }
+
+  .close-button {
+    $iconButtonPadding: 8px;
+    position: absolute;
+    top: 16px - $iconButtonPadding;
+    right: 16px - $iconButtonPadding;
+  }
+}

package/src/style/overrides/material/form-field.scss

@@ -0,0 +1,5 @@
+.mat-mdc-text-field-wrapper,
+.mdc-notched-outline__leading,
+.mdc-notched-outline__trailing {
+  border-radius: 0 !important;
+}

package/src/style/overrides/material/input.scss

@@ -0,0 +1,5 @@
+@use '../../../theme/colors';
+
+.mat-mdc-input-element {
+  color: colors.$grey-medium !important;
+}

package/src/theme/_colors.scss

@@ -0,0 +1,128 @@
+@use 'sass:map';
+@use 'sass:color';
+
+// https://design.quebec.ca/bases/couleurs
+// https://design.quebec.ca/design/bases/theme-sombre
+$blue-colors: (
+  50: color.adjust(#dae6f0, $lightness: 5%),
+  100: #dae6f0,
+  150: #c6dbee,
+  200: #adcdeb,
+  300: #72b2eb,
+  350: #4a98d9,
+  400: #3b95e1,
+  500: #0078cc,
+  550: #1472bf,
+  600: #095797,
+  650: #19406c,
+  700: #223654,
+  800: #162b47,
+  900: color.adjust(#162b47, $lightness: -10%)
+);
+
+$grey-colors: (
+  0: #ffffff,
+  100: #f1f1f2,
+  150: #d7d8dd,
+  200: #c5cad2,
+  300: #a7acbc,
+  350: #8893a2,
+  400: #8590a8,
+  450: #6b778a,
+  500: #6a7688,
+  600: #4e5662,
+  700: #3b424c,
+  850: #1c2025,
+  900: #121519,
+  950: #000000
+);
+
+$red-colors: (
+  50: #ffdbd6,
+  200: #f3bcb6,
+  300: #e58271,
+  350: #f17b6c,
+  400: #f26049,
+  500: #cb381f,
+  550: #bb3a23,
+  700: #692519,
+  800: #4f180e
+);
+
+$green-colors: (
+  100: #d7f0bb,
+  200: #b0d493,
+  400: #6e9c57,
+  500: #4f813d,
+  600: #2c4024,
+  800: #1e2f17
+);
+
+$yellow-colors: (
+  100: #f8e69a,
+  400: #e0ad03,
+  450: #ac7900,
+  600: #ad781c,
+  650: #6d4512,
+  800: #3f240c
+);
+
+$violet-colors: (
+  300: #b3a5d4,
+  500: #6b4fa1
+);
+
+$blue-pale: map.get($blue-colors, 100);
+$blue-150: map.get($blue-colors, 150);
+$blue-200: map.get($blue-colors, 200);
+$blue-300: map.get($blue-colors, 300);
+$blue-light: map.get($blue-colors, 350);
+$blue-400: map.get($blue-colors, 400);
+$blue-500: map.get($blue-colors, 500);
+$blue-normal: map.get($blue-colors, 550);
+$blue-piv: map.get($blue-colors, 600);
+$blue-medium: map.get($blue-colors, 650);
+$blue-dark: map.get($blue-colors, 700);
+$blue-800: map.get($blue-colors, 800);
+
+$white: map.get($grey-colors, 0);
+$grey-pale: map.get($grey-colors, 100);
+$grey-150: map.get($grey-colors, 150);
+$grey-light: map.get($grey-colors, 200);
+$grey-300: map.get($grey-colors, 300);
+$grey-normal: map.get($grey-colors, 350);
+$grey-400: map.get($grey-colors, 400);
+$grey-medium: map.get($grey-colors, 450);
+$grey-500: map.get($grey-colors, 500);
+$grey-dark: map.get($grey-colors, 600);
+$grey-700: map.get($grey-colors, 700);
+$grey-850: map.get($grey-colors, 500);
+$grey-900: map.get($grey-colors, 900);
+$black: map.get($grey-colors, 950);
+
+$pink-pale: map.get($red-colors, 50);
+$red-200: map.get($red-colors, 200);
+$pink: map.get($red-colors, 300);
+$red-350: map.get($red-colors, 350);
+$red-400: map.get($red-colors, 400);
+$red-normal: map.get($red-colors, 500);
+$red-550: map.get($red-colors, 550);
+$red-dark: map.get($red-colors, 700);
+$red-800: map.get($red-colors, 800);
+
+$green-pale: map.get($green-colors, 100);
+$green-200: map.get($green-colors, 200);
+$green-400: map.get($green-colors, 400);
+$green-normal: map.get($green-colors, 500);
+$green-dark: map.get($green-colors, 600);
+$green-800: map.get($green-colors, 800);
+
+$yellow-pale: map.get($yellow-colors, 100);
+$yellow-normal: map.get($yellow-colors, 400);
+$yellow-450: map.get($yellow-colors, 450);
+$yellow-dark: map.get($yellow-colors, 600);
+$yellow-650: map.get($yellow-colors, 650);
+$yellow-800: map.get($yellow-colors, 800);
+
+$violet-300: map.get($violet-colors, 300);
+$violet-normal: map.get($violet-colors, 500);

package/src/theme/_index.scss

@@ -0,0 +1,3 @@
+@forward './colors';
+@forward './palettes';
+@forward './theme';

package/src/theme/_palettes.scss

@@ -0,0 +1,112 @@
+@use 'sass:map';
+@use 'sass:color';
+@use './colors';
+
+// Design Quebec colors
+
+// $primary: colors.$blue-piv;
+// $accent: colors.$pink;
+
+$dark-primary-text: colors.$blue-dark;
+$light-primary-text: colors.$white;
+
+$primary-palette: (
+  50: map.get(colors.$blue-colors, 50),
+  100: map.get(colors.$blue-colors, 100),
+  200: map.get(colors.$blue-colors, 200),
+  300: map.get(colors.$blue-colors, 300),
+  400: map.get(colors.$blue-colors, 400),
+  500: map.get(colors.$blue-colors, 500),
+  600: map.get(colors.$blue-colors, 600),
+  700: map.get(colors.$blue-colors, 700),
+  800: map.get(colors.$blue-colors, 800),
+  900: map.get(colors.$blue-colors, 900),
+  A100: map.get(colors.$blue-colors, 500),
+  A200: color.adjust(map.get(colors.$blue-colors, 500), $lightness: 10%),
+  A400: map.get(colors.$grey-colors, 200),
+  A700: map.get(colors.$grey-colors, 100),
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);
+
+$accent: map.get(colors.$red-colors, 300);
+
+$accent-palette: (
+  50: map.get(colors.$red-colors, 50),
+  100: color.adjust($accent, $lightness: 40%),
+  200: color.adjust($accent, $lightness: 30%),
+  300: color.adjust($accent, $lightness: 20%),
+  400: color.adjust($accent, $lightness: 10%),
+  500: $accent,
+  600: color.adjust($accent, $lightness: -10%),
+  700: color.adjust($accent, $lightness: -20%),
+  800: color.adjust($accent, $lightness: -30%),
+  900: color.adjust($accent, $lightness: -40%),
+  A100: map.get(colors.$red-colors, 500),
+  A200: color.adjust(map.get(colors.$red-colors, 500), $lightness: 10%),
+  A400: map.get(colors.$grey-colors, 200),
+  A700: map.get(colors.$grey-colors, 100),
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);
+
+$warn-palette: (
+  50: map.get(colors.$red-colors, 50),
+  100: color.adjust(map.get(colors.$red-colors, 200), $lightness: 10%),
+  200: map.get(colors.$red-colors, 200),
+  300: map.get(colors.$red-colors, 300),
+  400: map.get(colors.$red-colors, 400),
+  500: map.get(colors.$red-colors, 500),
+  600: map.get(colors.$red-colors, 550),
+  700: map.get(colors.$red-colors, 700),
+  800: map.get(colors.$red-colors, 800),
+  900: color.adjust(map.get(colors.$red-colors, 800), $lightness: -10%),
+  A100: map.get(colors.$red-colors, 500),
+  A200: color.adjust(map.get(colors.$red-colors, 500), $lightness: 10%),
+  A400: map.get(colors.$grey-colors, 200),
+  A700: map.get(colors.$grey-colors, 100),
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);

package/src/theme/_theme.scss

@@ -0,0 +1,46 @@
+@use '@angular/material' as mat;
+@use '../style/overrides';
+@use './palettes';
+@use '../typography';
+
+// https://design.quebec.ca/a-propos-systeme-design
+$theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: mat.m2-define-palette(palettes.$primary-palette, 600, 400, 700),
+      accent: mat.m2-define-palette(palettes.$accent-palette, 500),
+      warn: mat.m2-define-palette(palettes.$warn-palette, 500),
+      success: mat.m2-define-palette(palettes.$primary-palette, 900)
+    ),
+    typography: typography.$typography,
+    density: 0
+  )
+);
+
+// Define an alternate dark theme.
+$dark-theme: mat.m2-define-dark-theme(
+  (
+    color: (
+      primary: mat.m2-define-palette(palettes.$primary-palette, 300, 100, 800),
+      accent: mat.m2-define-palette(palettes.$accent-palette, 400, 100, 800),
+      warn: mat.m2-define-palette(palettes.$warn-palette, 400, 200, 800)
+    ),
+    typography: typography.$typography,
+    density: 0
+  )
+);
+
+@mixin themes($theme) {
+  @include overrides.override-igo2-lib-themes($theme);
+  @include overrides.override-material-themes($theme);
+}
+
+@mixin colors($theme) {
+  @include overrides.override-igo2-lib-colors($theme);
+  @include overrides.override-material-colors($theme);
+}
+
+@mixin densities($theme) {
+  @include overrides.override-igo2-lib-densities($theme);
+  @include overrides.override-material-densities($theme);
+}

package/src/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward './typography';
+@forward './typography.utils';