@igo2/sdg-core 1.0.0-next.100

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

@@ -0,0 +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

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

package/src/style/overrides/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/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-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/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/_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(--mdc-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;
+      }
+    }
+  }
+}