@igo2/sdg-theme 2.0.0-next.10

package/README.md

@@ -0,0 +1,97 @@
+# @igo2/sdg-theme
+
+Couche de personnalisation Material Design pour le Système de Design Gouvernemental du Québec (SDG).
+
+## Vue d'ensemble
+
+Ce package regroupe tout ce qui est lié à Angular Material : la configuration du thème de couleurs, les overrides de composants Material, et les overrides de la librairie IGO2. Il s'utilise en complément de `@igo2/sdg-core` qui, lui, reste entièrement indépendant de Material.
+
+## Quand l'utiliser
+
+Installez ce package si votre application :
+- Utilise des composants `@angular/material`
+- Veut les composants Material stylisés selon les spécifications SDG
+- Utilise des composants de la librairie IGO2 (`igo-search-bar`, `igo-list`, etc.)
+
+## Installation
+
+```bash
+npm install @igo2/sdg-theme
+```
+
+## Utilisation
+
+Exemple de référence : `projects/demo/src/theme/theme.scss`
+
+```scss
+@use '@angular/material' as mat;
+@use '@igo2/sdg-theme' as sdg-theme;
+
+html {
+  color-scheme: light;
+
+  // Configure le thème de couleurs Material avec la palette SDG
+  @include mat.theme(sdg-theme.$material-theme);
+
+  // Applique les tokens système, la typographie, et tous les overrides
+  @include sdg-theme.theme(true);
+}
+```
+
+## API publique
+
+### Variables
+
+| Variable | Description |
+|----------|-------------|
+| `$material-theme` | Configuration du thème Material (couleurs, typographie, densité) à passer à `mat.theme()` |
+| `$primary-palette` | Palette de couleurs primaire SDG (bleu gouvernemental) |
+
+### Mixins
+
+| Mixin | Description |
+|-------|-------------|
+| `theme($withDarkMode: false)` | Point d'entrée principal. Applique les tokens système, la typographie, les overrides IGO2 et les overrides Material |
+| `overrides()` | Applique uniquement les overrides de composants Material (sans tokens ni typographie) |
+
+## Migration depuis v1.x
+
+### Avant (v1.x)
+
+```scss
+@use '@angular/material' as mat;
+@use '@igo2/sdg-core' as sdg;
+
+html {
+  @include mat.theme(sdg.$material-theme);
+  @include sdg.theme(true);
+}
+```
+
+### Après (v2.x)
+
+```scss
+@use '@angular/material' as mat;
+@use '@igo2/sdg-theme' as sdg-theme;
+
+html {
+  @include mat.theme(sdg-theme.$material-theme);
+  @include sdg-theme.theme(true);
+}
+```
+
+### Étapes de migration
+
+1. Installer `@igo2/sdg-theme` : `npm install @igo2/sdg-theme`
+2. Remplacer `@use '@igo2/sdg-core' as sdg` par `@use '@igo2/sdg-theme' as sdg-theme` dans votre fichier de thème
+3. Remplacer `sdg.$material-theme` par `sdg-theme.$material-theme`
+4. Remplacer `sdg.theme(...)` par `sdg-theme.theme(...)`
+
+## Dépendances
+
+- `@angular/material` (peerDependency) — ^21.0.0
+- `@igo2/sdg-core` (peerDependency) — ^2.0.0
+
+## Packages associés
+
+- [`@igo2/sdg-core`](../core/README.md) — Infrastructure pure : styles, services, utilitaires

package/_index.scss

@@ -0,0 +1,35 @@
+/**
+ * SDG Material Theme Overrides
+ *
+ * This module provides Material Design component customizations aligned with
+ * the Système de Design Gouvernemental du Québec (SDG).
+ *
+ * Usage:
+ *   @use '@igo2/sdg-theme' as theme;
+ *   @include theme.theme();
+ */
+
+@use './src/material' as material;
+@use './src/igo2-lib' as igo2-lib;
+@use '@igo2/sdg-core' as core;
+
+$material-theme: material.$theme;
+$primary-palette: material.$primary-palette;
+
+@mixin theme($withDarkMode: false) {
+  @include core.system-tokens();
+
+  @if ($withDarkMode) {
+    body.dark-mode {
+      @include core.system-dark-colors();
+    }
+  }
+
+  body {
+    background-color: var(--sdg-color-background);
+  }
+
+  @include core.typo-base();
+  @include igo2-lib.overrides();
+  @include material.overrides();
+}

package/fesm2022/igo2-sdg-theme.mjs

@@ -0,0 +1,13 @@
+/**
+ * Public API Surface of sdg-theme
+ */
+// Material theme overrides are exported as SCSS via _index.scss
+// This file is required for ng-packagr
+const SDG_THEME_VERSION = '1.0.0';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SDG_THEME_VERSION };
+//# sourceMappingURL=igo2-sdg-theme.mjs.map

package/fesm2022/igo2-sdg-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"igo2-sdg-theme.mjs","sources":["../../../packages/theme/src/public-api.ts","../../../packages/theme/src/igo2-sdg-theme.ts"],"sourcesContent":["/**\n * Public API Surface of sdg-theme\n */\n\n// Material theme overrides are exported as SCSS via _index.scss\n// This file is required for ng-packagr\nexport const SDG_THEME_VERSION = '1.0.0';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG;AAEH;AACA;AACO,MAAM,iBAAiB,GAAG;;ACNjC;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@igo2/sdg-theme",
+  "version": "2.0.0-next.10",
+  "license": "LiLiQ-R",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/infra-geo-ouverte/sdg.git",
+    "directory": "packages/theme"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "exports": {
+    ".": {
+      "sass": "./_index.scss",
+      "types": "./types/igo2-sdg-theme.d.ts",
+      "default": "./fesm2022/igo2-sdg-theme.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "peerDependencies": {
+    "@angular/material": "^21.0.0",
+    "@igo2/sdg-core": "^2.0.0-next.10"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/igo2-sdg-theme.mjs",
+  "typings": "types/igo2-sdg-theme.d.ts",
+  "type": "module"
+}

package/src/igo2-lib/_index.scss

@@ -0,0 +1,9 @@
+@use './list';
+@use './panel';
+@use './search-bar';
+
+@mixin overrides() {
+  @include list.overrides();
+  @include panel.overrides();
+  @include search-bar.overrides();
+}

package/src/igo2-lib/_list.scss

@@ -0,0 +1,22 @@
+@mixin overrides() {
+  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: var(--sdg-color-blue-pale);
+
+    h4,
+    small {
+      color: var(--sdg-color-blue-piv) !important;
+    }
+  }
+}

package/src/igo2-lib/_panel.scss

@@ -0,0 +1,7 @@
+@mixin overrides() {
+  .igo-panel-header,
+  .igo-panel-header button,
+  .igo-panel-title {
+    color: var(--sdg-color-blue-piv) !important;
+  }
+}

package/src/igo2-lib/_search-bar.scss

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  igo-search-bar {
+    background-color: var(--sdg-color-background);
+
+    // Workaroung, OPEN SANS font add a mysterious 1px for the height
+    .mat-mdc-form-field-infix {
+      max-height: 40px;
+    }
+
+    button[mat-icon-button] {
+      border-radius: 0;
+      background-color: var(--sdg-color-blue-piv);
+
+      &:hover {
+        background-color: var(--sdg-color-blue-normal);
+      }
+    }
+
+    mat-icon {
+      color: var(--sdg-color-white);
+    }
+
+    mat-form-field {
+      @include mat.form-field-overrides(
+        (
+          container-height: 40px,
+          container-vertical-padding: 8px
+        )
+      );
+    }
+
+    .mdc-icon-button.mat-mdc-button-base {
+      @include mat.icon-button-overrides(
+        (
+          state-layer-size: 40px
+        )
+      );
+      // reset the default padding of Material. Igo is overriding it
+      padding: calc(
+        calc(
+            var(--mat-icon-button-state-layer-size, 40px) - var(
+                --mat-icon-button-icon-size,
+                24px
+              )
+          ) /
+          2
+      );
+    }
+  }
+
+  igo-search-results {
+    igo-collapsible {
+      .mdc-list-item__primary-text {
+        color: var(--sdg-color-text);
+        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: var(--sdg-color-text);
+    }
+  }
+}

package/src/material/_button.scss

@@ -0,0 +1,137 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mdc-button {
+    $height: 56px;
+    $font-size: var(--sdg-font-size-md);
+    $border-radius: 0;
+    $horizontal-padding: 16px;
+
+    min-width: calc($height * 2) !important;
+    max-width: 360px;
+    line-height: var(--sdg-line-height-md) !important;
+
+    @include mat.button-overrides(
+      (
+        filled-container-height: $height,
+        filled-label-text-size: $font-size,
+        filled-label-text-weight: bold,
+        filled-container-shape: $border-radius,
+        filled-horizontal-padding: $horizontal-padding,
+        outlined-container-height: $height,
+        outlined-label-text-size: $font-size,
+        outlined-label-text-weight: bold,
+        outlined-container-shape: $border-radius,
+        outlined-horizontal-padding: $horizontal-padding,
+        protected-container-height: $height,
+        protected-label-text-size: $font-size,
+        protected-label-text-weight: bold,
+        protected-container-shape: $border-radius,
+        protected-horizontal-padding: $horizontal-padding,
+        text-container-height: $height,
+        text-label-text-size: $font-size,
+        text-label-text-weight: bold,
+        text-container-shape: $border-radius,
+        text-horizontal-padding: $horizontal-padding
+      )
+    );
+
+    &[compact] {
+      $height: 40px;
+      @include mat.button-overrides(
+        (
+          filled-container-height: $height,
+          outlined-container-height: $height,
+          protected-container-height: $height,
+          text-container-height: $height
+        )
+      );
+
+      min-width: calc($height * 2) !important;
+    }
+  }
+
+  .mat-mdc-button-base {
+    &.on-primary {
+      @include mat.button-overrides(
+        (
+          filled-state-layer-color: var(--sdg-color-grey-pale),
+          outlined-state-layer-color: var(--sdg-color-grey-pale),
+          protected-state-layer-color: var(--sdg-color-grey-pale),
+          text-state-layer-color: var(--sdg-color-grey-pale)
+        )
+      );
+      @include mat.icon-button-overrides(
+        (
+          state-layer-color: var(--sdg-color-grey-pale)
+        )
+      );
+    }
+  }
+
+  .mat-mdc-outlined-button {
+    border-color: currentColor !important;
+    border-width: 2px !important;
+    background-color: var(--sdg-color-background) !important;
+
+    &[compact] {
+      border-width: 1px !important;
+    }
+  }
+
+  .mdc-fab {
+    $background: var(--sdg-color-blue-piv);
+    $foreground: var(--sdg-color-white);
+    $border-radius: 0;
+
+    @include mat.fab-overrides(
+      (
+        container-color: $background,
+        container-shape: $border-radius,
+        foreground-color: $foreground,
+        small-container-color: $background,
+        small-container-shape: $border-radius,
+        small-foreground-color: $foreground
+      )
+    );
+  }
+
+  @include color-variants-backwards-compatibility();
+}
+
+// Material custom color variants backwards compatibility
+@mixin color-variants-backwards-compatibility() {
+  .mdc-button {
+    &.mat-warn {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--sdg-color-red-normal)
+        )
+      );
+    }
+    &.mat-primary {
+      @include mat.button-overrides(
+        (
+          filled-container-color: var(--sdg-color-blue-piv)
+        )
+      );
+    }
+  }
+
+  .mdc-icon-button {
+    &.mat-warn {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--sdg-color-red-normal)
+        )
+      );
+    }
+    &.mat-primary {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--sdg-color-blue-piv)
+        )
+      );
+    }
+  }
+}

package/src/material/_checkbox.scss

@@ -0,0 +1,120 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  .mat-mdc-checkbox {
+    $disabled-color: var(--sdg-color-grey-light);
+    $unselected-color: var(--sdg-color-blue-dark);
+    $selected-color: var(--sdg-color-blue-normal);
+
+    $base-size: 8px;
+    $checkbox-size: calc($base-size * 3);
+    $size-with-padding: var(--mat-checkbox-state-layer-size);
+
+    @include mat.checkbox-overrides(
+      (
+        label-text-size: var(--sdg-font-size-md),
+        label-text-line-height: var(--sdg-font-size-md),
+        // same as font size to avoid extra space above and below
+        label-text-color: $unselected-color,
+
+        disabled-label-color: $disabled-color,
+        disabled-unselected-icon-color: $disabled-color,
+        disabled-selected-checkmark-color: var(--sdg-color-grey-pale),
+        disabled-selected-icon-color: $disabled-color,
+
+        unselected-icon-color: $unselected-color,
+        unselected-hover-icon-color: $unselected-color,
+        unselected-focus-icon-color: $selected-color,
+
+        unselected-hover-state-layer-opacity: 0,
+        unselected-focus-state-layer-opacity: 0,
+        unselected-pressed-state-layer-opacity: 0,
+
+        unselected-hover-state-layer-color: transparent,
+        unselected-focus-state-layer-color: transparent,
+        unselected-pressed-state-layer-color: transparent,
+
+        selected-icon-color: $selected-color,
+        selected-hover-icon-color: $selected-color,
+        selected-focus-icon-color: $selected-color,
+        selected-pressed-icon-color: $selected-color,
+
+        selected-hover-state-layer-opacity: 0,
+        selected-focus-state-layer-opacity: 0,
+        selected-pressed-state-layer-opacity: 0,
+
+        selected-hover-state-layer-color: transparent,
+        selected-focus-state-layer-color: transparent,
+        selected-pressed-state-layer-color: transparent
+      )
+    );
+
+    .mdc-checkbox__native-control {
+      top: calc($base-size / 2);
+      left: calc($base-size / 2);
+      right: calc($base-size / 2);
+
+      &:focus:checked ~ .mdc-checkbox__background {
+        border-color: $unselected-color;
+      }
+    }
+
+    .mdc-checkbox {
+      height: $checkbox-size;
+      width: $checkbox-size;
+      flex-basis: $checkbox-size;
+
+      .mdc-checkbox__background {
+        height: $checkbox-size;
+        width: $checkbox-size;
+        border-radius: 0px;
+      }
+    }
+
+    .mat-mdc-checkbox-touch-target {
+      height: $size-with-padding;
+      width: $size-with-padding;
+    }
+
+    .mdc-label {
+      padding-left: 0;
+      transform: translateY(
+        1px
+      ); // visually center the label with the radio button
+    }
+
+    &[compact] {
+      $checkbox-size: calc($base-size * 2);
+      $size-with-padding: calc($checkbox-size + ($base-size * 2));
+
+      @include mat.checkbox-overrides(
+        (
+          state-layer-size: $size-with-padding
+        )
+      );
+
+      .mdc-checkbox__native-control {
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .mdc-checkbox {
+        height: $checkbox-size;
+        width: $checkbox-size;
+        flex-basis: $checkbox-size;
+
+        .mdc-checkbox__background {
+          height: $checkbox-size;
+          width: $checkbox-size;
+          border-width: 1px;
+        }
+      }
+
+      .mat-mdc-checkbox-touch-target {
+        height: $size-with-padding;
+        width: $size-with-padding;
+      }
+    }
+  }
+}

package/src/material/_chip.scss

@@ -0,0 +1,122 @@
+@use '@angular/material' as mat;
+
+$focus-color: var(--sdg-color-blue-light);
+$white: var(--sdg-color-white);
+
+@mixin overrides() {
+  $border-outline-width: 2px;
+
+  .mat-mdc-chip-set {
+    .mdc-evolution-chip {
+      margin: 0;
+      min-height: 40px;
+      max-height: 60px;
+      min-width: 56px;
+
+      &-set__chips {
+        margin: 0;
+        gap: 8px;
+      }
+
+      &__action-primary {
+        padding-left: 4px;
+      }
+
+      &:focus-visible {
+        border: $border-outline-width solid $white;
+        outline: $border-outline-width solid $focus-color;
+      }
+    }
+  }
+
+  .mdc-evolution-chip__action {
+    &--presentational {
+      cursor: pointer;
+    }
+
+    &--primary:hover::before {
+      border-color: $focus-color !important;
+    }
+
+    &--primary:focus::before {
+      border-width: $border-outline-width;
+      outline: $border-outline-width solid $focus-color;
+    }
+  }
+
+  .mat-mdc-standard-chip {
+    &.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action {
+      &--primary {
+        padding-left: 8px;
+      }
+
+      &--trailing {
+        padding-left: 4px;
+        padding-right: 6px;
+      }
+    }
+
+    & .mdc-evolution-chip__action {
+      &--primary {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+
+  .mat-mdc-chip-remove {
+    &::after {
+      left: 2px;
+      right: 4px;
+    }
+
+    .mat-icon {
+      z-index: 1;
+    }
+  }
+
+  .mat-mdc-chip {
+    $background-color: var(--sdg-color-blue-pale);
+    $text-color: var(--sdg-color-blue-piv);
+    $disabled-background-color: var(--sdg-color-grey-pale);
+    $disabled-color: var(--sdg-color-grey-normal);
+
+    @include mat.chips-overrides(
+      (
+        container-shape-radius: 0,
+
+        outline-width: 1px,
+        outline-color: $background-color,
+
+        focus-outline-color: $white,
+        focus-state-layer-color: transparent,
+        focus-state-layer-opacity: 0,
+
+        disabled-outline-color: $disabled-background-color,
+        disabled-label-text-color: $disabled-color,
+        disabled-container-opacity: 1,
+
+        hover-state-layer-opacity: 0,
+        hover-state-layer-color: transparent,
+
+        elevated-container-color: $background-color,
+        elevated-selected-container-color: $background-color,
+        elevated-disabled-container-color: $disabled-background-color,
+
+        with-trailing-icon-disabled-trailing-icon-opacity: 1,
+        with-trailing-icon-disabled-trailing-icon-color: $disabled-color,
+        with-trailing-icon-trailing-icon-color: $text-color,
+
+        label-text-color: $text-color,
+        label-text-weight: 600,
+        label-text-line-height: var(--sdg-line-height-sm),
+        label-text-size: var(--sdg-font-size-sm),
+        trailing-action-focus-state-layer-opacity: 1,
+        trailing-action-hover-state-layer-opacity: 1,
+        trailing-action-state-layer-color: var(--sdg-color-grey-light),
+        trailing-action-focus-opacity: 1,
+        trailing-action-opacity: 1
+      )
+    );
+  }
+}