@igo2/sdg-core 1.0.0-next.79 → 1.0.0-next.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igo2/sdg-core",
-  "version": "1.0.0-next.79",
+  "version": "1.0.0-next.80",
   "license": "LiLiQ-R",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
       "default": "./fesm2022/igo2-sdg-core.mjs"
     },
     "./layout": {
-      "sass": "./src/layout/layout.scss"
+      "sass": "./src/layout/bootstrap-layout.scss"
     },
     "./package.json": {
       "default": "./package.json"

package/src/_index.scss

@@ -1,3 +1,4 @@
 @forward './layout';
 @forward './theme';
-@forward './typography';
+@forward './style';
+@forward './tokens';

package/src/layout/_breakpoints.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 
 // https://design.quebec.ca/design/bases/grille-8px#c84016
-$breakpoints: (
-  small: (
+$grids: (
+  sm: (
     min-width: 0,
     max-width: 575px,
     container-max-width: container-max-width('mobile'),
@@ -10,7 +10,7 @@ $breakpoints: (
     spacing: 16px,
     margins: 8px
   ),
-  medium: (
+  md: (
     min-width: 576px,
     max-width: 767px,
     container-max-width: container-max-width('mobile-landscape'),
@@ -18,7 +18,7 @@ $breakpoints: (
     spacing: 16px,
     margins: 8px
   ),
-  large: (
+  lg: (
     min-width: 768px,
     max-width: 991px,
     container-max-width: container-max-width('tablet'),
@@ -26,7 +26,7 @@ $breakpoints: (
     spacing: 24px,
     margins: 12px
   ),
-  extra-large: (
+  xl: (
     min-width: 992px,
     max-width: 1199px,
     container-max-width: container-max-width('laptop'),
@@ -34,7 +34,7 @@ $breakpoints: (
     spacing: 24px,
     margins: 12px
   ),
-  maximum: (
+  max: (
     min-width: 1200px,
     max-width: 9999px,
     container-max-width: container-max-width('desktop'),
@@ -42,18 +42,33 @@ $breakpoints: (
     spacing: 32px,
     margins: 16px
   )
-);
-
-$max-content-width: 825px;
+) !default;
 
 $devices: (
-  mobile: 'small',
-  mobile-landscape: 'medium',
-  tablet: 'large',
-  laptop: 'extra-large',
-  desktop: 'maximum'
+  mobile: 'sm',
+  mobile-landscape: 'md',
+  tablet: 'lg',
+  laptop: 'xl',
+  desktop: 'max'
 );
 
+// Flattens a nested map, concatenating keys with '-' and returning a flat map.
+@function get-grid-tokens() {
+  $result: ();
+  @each $breakpoint, $valueMap in $grids {
+    @each $key, $value in $valueMap {
+      $full-key: $key + '-' + $breakpoint;
+      $result: map.merge(
+        $result,
+        (
+          $full-key: $value
+        )
+      );
+    }
+  }
+  @return $result;
+}
+
 @function breakpoint($device) {
   @return map.get($devices, $device);
 }
@@ -61,46 +76,25 @@ $devices: (
 @function min-width($device) {
   $breakpoint: breakpoint($device);
   @if $breakpoint {
-    @return map.get($breakpoints, $breakpoint, min-width);
+    @return map.get($grids, $breakpoint, min-width);
   }
 }
 
 @function max-width($device) {
   $breakpoint: breakpoint($device);
   @if $breakpoint {
-    @return map.get($breakpoints, $breakpoint, max-width);
+    @return map.get($grids, $breakpoint, max-width);
   }
 }
 
 @function container-max-width($device) {
   $breakpoint: breakpoint($device);
-  $margins: map.get($breakpoints, $breakpoint, margins);
+  $margins: map.get($grids, $breakpoint, margins);
 
-  @if $breakpoint == 'small' {
-    @return calc(map.get($breakpoints, $breakpoint, max-width) - 2 * $margins);
+  @if $breakpoint == 'sm' {
+    @return calc(map.get($grids, $breakpoint, max-width) - 2 * $margins);
   } @else {
-    @return calc(map.get($breakpoints, $breakpoint, min-width) - 2 * $margins);
-  }
-}
-
-@function columns($device) {
-  $breakpoint: breakpoint($device);
-  @if $breakpoint {
-    @return map.get($breakpoints, $breakpoint, columns);
-  }
-}
-
-@function spacing($device) {
-  $breakpoint: breakpoint($device);
-  @if $breakpoint {
-    @return map.get($breakpoints, $breakpoint, spacing);
-  }
-}
-
-@function margins($device) {
-  $breakpoint: breakpoint($device);
-  @if $breakpoint {
-    @return map.get($breakpoints, $breapoint, margins);
+    @return calc(map.get($grids, $breakpoint, min-width) - 2 * $margins);
   }
 }
 
@@ -110,7 +104,7 @@ $devices: (
 @mixin media($device) {
   $breakpoint: breakpoint($device);
   @if $breakpoint {
-    $max-width: map.get($breakpoints, $breakpoint, max-width);
+    $max-width: map.get($grids, $breakpoint, max-width);
     @if $max-width {
       @media (max-width: $max-width) {
         @content;

package/src/style/_elevation.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use './sass-utils';
+@use '../tokens/sys-palettes';
+
+$shadow-elevations: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 4px 0px ',
+  2: '0px 2px 8px 0px',
+  3: '0px 4px 16px 0px',
+  4: '0px 6px 24px 0px'
+);
+
+// The default color "dark-blue" or "#223654" for elevation shadows.
+$color: map.get(sys-palettes.$palettes, 'blue', 700) !default;
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 4.
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  box-shadow: get-box-shadow($zValue, $color, $opacity);
+}
+
+@function get-box-shadow($zValue, $shadow-color: $color, $opacity: null) {
+  @if $zValue == null {
+    @return null;
+  }
+
+  @if (sass-utils.is-css-var-name($zValue)) {
+    @return $zValue;
+  }
+
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
+    @error '$zValue must be a unitless number, but received `#{$zValue}`';
+  }
+
+  @if $zValue < 0 or $zValue > 4 {
+    @error '$zValue must be between 0 and 4, but received `#{$zValue}`';
+  }
+
+  $z-value: map.get($shadow-elevations, $zValue);
+  $color: _compute-color-opacity($shadow-color, 0.24);
+
+  @return string.unquote('#{$z-value} #{$color}');
+}
+
+@function _compute-color-opacity($color, $opacity) {
+  @if meta.type-of($color) == color and $opacity != null {
+    @return rgba($color, $opacity);
+  } @else {
+    @return $color;
+  }
+}

package/src/style/_index.scss

@@ -1 +1,4 @@
 @forward './overrides';
+@forward './elevation';
+@forward './typography';
+@forward './typography-utils';

package/src/style/_sass-utils.scss

@@ -0,0 +1,24 @@
+@use 'sass:meta';
+
+/// Include content under the current selector (&) or the document root if there is no current
+/// selector.
+/// @param {String} $root [html] The default root selector to use when there is no current selector.
+/// @output The given content under the current selector, or root selector if there is no current
+///     selector.
+/// @content Content to output under the current selector, or root selector if there is no current
+///     selector.
+@mixin current-selector-or-root($root: html) {
+  @if & {
+    @content;
+  } @else {
+    #{$root} {
+      @content;
+    }
+  }
+}
+
+// Returns whether the $value is a CSS variable name based on whether it's a string prefixed
+// by "--".
+@function is-css-var-name($value) {
+  @return meta.type-of($value) == string and string.index($value, '--') == 1;
+}

package/src/style/_typography-utils.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+
+$percent-root-font-size: 100 !default;
+$rem-ratio: math.div(1, 0.16 * $percent-root-font-size);
+
+@function rem($px-size) {
+  @return $px-size * $rem-ratio * 1rem;
+}
+
+@function rem-ratio($px-size) {
+  @return math.div($px-size, 16 * $percent-root-font-size * 0.01) * 1rem;
+}
+
+@mixin title-border {
+  &:after {
+    content: '';
+    display: block;
+    margin: 0;
+    width: 48px;
+    padding-top: 4px;
+    border-bottom: 4px solid var(--sdg-color-pink-normal);
+  }
+}

package/src/style/_typography.scss

@@ -0,0 +1,139 @@
+@use '../layout/breakpoints';
+@use './typography-utils' as *;
+@use '../tokens/token-utils';
+
+@mixin typo-set-base-styles {
+  :root {
+    font-size: var(--sdg-font-size-root-percent);
+  }
+
+  body {
+    color: var(--sdg-color-text);
+    font-family: var(--sdg-font-family-text);
+    font-size: var(--sdg-font-size-md);
+  }
+
+  a {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    color: var(--sdg-color-blue-piv);
+    text-decoration: underline;
+    background-color: transparent;
+    width: fit-content;
+    max-inline-size: var(--sdg-max-content-width);
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  button {
+    font-family: var(--sdg-font-family-text);
+  }
+
+  p,
+  ul,
+  ol,
+  u,
+  .text {
+    color: var(--sdg-color-text);
+    font-size: var(--sdg-font-size-md);
+    line-height: 24px;
+    max-inline-size: var(--sdg-max-content-width);
+  }
+
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 24px;
+    padding-left: 16px;
+  }
+
+  p {
+    margin-bottom: 24px !important;
+  }
+
+  li {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: var(--sdg-font-family-title) !important;
+    font-weight: bold !important;
+    color: var(--sdg-color-text);
+    max-inline-size: var(--sdg-max-content-width);
+  }
+
+  h1 {
+    @include header-font('h1');
+    @include title-border;
+
+    @include breakpoints.media(mobile) {
+      font-size: var(--sdg-mobile-font-size-h1);
+      line-height: var(--sdg-mobile-line-height-h1);
+      margin-top: var(--sdg-spacer-lg) !important;
+      margin-bottom: var(--sdg-spacer-sm) !important;
+    }
+  }
+
+  h2 {
+    @include header-font('h2');
+
+    @include breakpoints.media(mobile) {
+      font-size: var(--sdg-mobile-font-size-h2);
+      line-height: var(--sdg-mobile-line-height-h2);
+    }
+  }
+
+  h3 {
+    @include header-font('h3');
+
+    @include breakpoints.media(mobile) {
+      font-size: var(--sdg-mobile-font-size-h3);
+    }
+  }
+
+  h4 {
+    @include header-font('h4');
+  }
+
+  h5 {
+    @include header-font('h5');
+  }
+
+  h6 {
+    @include header-font('h6');
+  }
+
+  .accroche {
+    font-size: var(--sdg-font-size-lg);
+    line-height: var(--sdg-line-height-lg);
+    font-weight: 600;
+    max-width: var(--sdg-max-content-width);
+    padding-bottom: 24px;
+  }
+}
+
+@mixin header-font($header) {
+  font-size: var(--sdg-font-size-#{$header});
+  line-height: var(--sdg-line-height-#{$header});
+  margin-top: var(--sdg-title-margin-#{$header}-mt) !important;
+  margin-bottom: var(--sdg-title-margin-#{$header}-mb) !important;
+}

package/src/style/overrides/_index.scss

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

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

@@ -1,6 +1,9 @@
 @use './list';
 @use './panel';
 @use './search-bar';
-@use './scrollbar';
 
-@forward './index-theme' as override-igo2-lib-*;
+@mixin overrides() {
+  @include list.overrides();
+  @include panel.overrides();
+  @include search-bar.overrides();
+}

package/src/style/overrides/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/style/overrides/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/style/overrides/igo2-lib/_search-bar.scss

@@ -0,0 +1,70 @@
+@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);
+    }
+
+    @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(--mdc-icon-button-state-layer-size, 40px) - var(
+                --mdc-icon-button-icon-size,
+                24px
+              )
+          ) /
+          2
+      );
+    }
+  }
+
+  igo-search-results {
+    igo-collapsible {
+      .mdc-list-item__primary-text {
+        color: var(--sdg-color-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: var(--sdg-color-blue-dark);
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+@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-outlined-button {
+    border-color: currentColor !important;
+    border-width: 2px !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/style/overrides/material/_dialog.scss

@@ -0,0 +1,37 @@
+@use '../../../style/typography-utils';
+
+@mixin overrides() {
+  .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-utils.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;
+    }
+  }
+}