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

package/src/tokens/_sys-elevation.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../style/elevation';
+
+@function sys-elevation-values() {
+  $result: ();
+
+  @each $key, $value in elevation.$shadow-elevations {
+    $result: map.merge(
+      $result,
+      (
+        'elevation-#{$key}': elevation.get-box-shadow($key)
+      )
+    );
+  }
+
+  @return $result;
+}

package/src/tokens/_sys-layout.scss

@@ -0,0 +1,28 @@
+@use './token-utils';
+@use '../layout/breakpoints';
+@use '../style/typography-utils' as *;
+
+@function sys-layout-values() {
+  $base-spacer: 8 !default;
+
+  $values: (
+    max-content-width: 825px,
+    spacer: (
+      8: rem(1 * $base-spacer),
+      16: rem(2 * $base-spacer),
+      24: rem(3 * $base-spacer),
+      32: rem(4 * $base-spacer),
+      48: rem(6 * $base-spacer),
+      72: rem(9 * $base-spacer),
+      96: rem(12 * $base-spacer),
+      xs: var(--sdg-spacer-8),
+      sm: var(--sdg-spacer-16),
+      md: var(--sdg-spacer-24),
+      lg: var(--sdg-spacer-48),
+      xl: var(--sdg-spacer-96)
+    ),
+    grid: breakpoints.get-grid-tokens()
+  );
+
+  @return token-utils.flatten-tokens-map($values);
+}

package/src/tokens/_sys-palettes.scss

@@ -0,0 +1,72 @@
+@use 'sass:color';
+
+@use './token-utils';
+
+$dark-blue: #223654;
+
+// https://design.quebec.ca/bases/couleurs
+$palettes: (
+  'blue': (
+    100: #dae6f0,
+    150: #c6dbee,
+    200: #adcdeb,
+    300: #72b2eb,
+    350: #4a98d9,
+    400: #3b95e1,
+    500: #0078cc,
+    550: #1472bf,
+    600: #095797,
+    650: #19406c,
+    700: #223654,
+    800: #162b47
+  ),
+  'grey': (
+    100: #f1f1f2,
+    150: #d7d8dd,
+    200: #c5cad2,
+    300: #a7acbc,
+    350: #8893a2,
+    400: #8590a8,
+    450: #6b778a,
+    500: #6a7688,
+    600: #4e5662,
+    700: #3b424c,
+    850: #1c2025,
+    900: #121519
+  ),
+  'red': (
+    50: #ffdbd6,
+    200: #f3bcb6,
+    300: #e58271,
+    350: #f17b6c,
+    400: #f26049,
+    500: #cb381f,
+    550: #bb3a23,
+    700: #692519,
+    800: #4f180e
+  ),
+  'green': (
+    100: #d7f0bb,
+    200: #b0d493,
+    400: #6e9c57,
+    500: #4f813d,
+    600: #2c4024,
+    800: #1e2f17
+  ),
+  'yellow': (
+    100: #f8e69a,
+    400: #e0ad03,
+    450: #ac7900,
+    600: #ad781c,
+    650: #6d4512,
+    800: #3f240c
+  ),
+  'violet': (
+    300: #b3a5d4,
+    500: #6b4fa1
+  )
+);
+
+@function sys-palette-values() {
+  @return token-utils.flatten-tokens-map($palettes, 'palette');
+}

package/src/tokens/_sys-typography.scss

@@ -0,0 +1,109 @@
+@use 'sass:map';
+@use '../style/typography-utils' as *;
+@use './token-utils';
+
+$typography: (
+  font: (
+    family: (
+      text: (
+        'Open Sans',
+        sans-serif
+      ),
+      title: (
+        'Roboto',
+        sans-serif
+      )
+    ),
+    size: (
+      root-percent: #{$percent-root-font-size}#{'%'},
+      h6: rem(16),
+      h5: rem(19),
+      h4: rem(21),
+      h3: rem(28),
+      h2: rem(36),
+      h1: rem(48),
+      80: rem(12),
+      90: rem(14),
+      100: rem(16),
+      120: rem(18),
+      200: rem(22),
+      xs: var(--sdg-font-size-80),
+      sm: var(--sdg-font-size-90),
+      md: var(--sdg-font-size-100),
+      lg: var(--sdg-font-size-120),
+      xl: var(--sdg-font-size-200),
+      content: var(--sdg-font-size-md)
+    ),
+    weight: (
+      regular: 400,
+      medium: 500,
+      semi-bold: 600,
+      bold: 700
+    )
+  ),
+  line-height: (
+    h6: rem(20),
+    h5: rem(24),
+    h4: rem(24),
+    h3: rem(32),
+    h2: rem(40),
+    h1: rem(56),
+    90: rem(20),
+    100: rem(24),
+    120: rem(28),
+    200: rem(32),
+    sm: var(--sdg-line-height-90),
+    md: var(--sdg-line-height-100),
+    lg: var(--sdg-line-height-120),
+    xl: var(--sdg-line-height-200)
+  ),
+  title: (
+    margin: (
+      h1: (
+        mt: var(--sdg-spacer-72),
+        mb: var(--sdg-spacer-32)
+      ),
+      h2: (
+        mt: var(--sdg-spacer-lg),
+        mb: var(--sdg-spacer-sm)
+      ),
+      h3: (
+        mt: var(--sdg-spacer-md),
+        mb: var(--sdg-spacer-sm)
+      ),
+      h4: (
+        mt: var(--sdg-spacer-md),
+        mb: var(--sdg-spacer-xs)
+      ),
+      h5: (
+        mt: var(--sdg-spacer-sm),
+        mb: 0
+      ),
+      h6: (
+        mt: var(--sdg-spacer-sm),
+        mb: 0
+      )
+    )
+  )
+);
+
+$typography-mobile: (
+  font: (
+    size: (
+      h3: rem(25),
+      h2: rem(28),
+      h1: rem(36)
+    )
+  ),
+  line-height: (
+    h2: rem(40),
+    h1: rem(56)
+  )
+);
+
+@function sys-typography-values() {
+  @return map.merge(
+    token-utils.flatten-tokens-map($typography),
+    token-utils.flatten-tokens-map($typography-mobile, 'mobile')
+  );
+}

package/src/tokens/_system.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+
+@use '../style/overrides';
+@use '../style/elevation';
+@use './sys-colors';
+@use './sys-elevation';
+@use './sys-layout';
+@use './sys-palettes';
+@use './sys-typography';
+@use './token-utils';
+
+@mixin theme($withDarkMode: false) {
+  @include _system-colors();
+  @include _system-typographies();
+  @include _system-layout();
+  @include _system-level-elevation();
+
+  @if ($withDarkMode) {
+    body.dark-mode {
+      @include _system-dark-colors();
+    }
+  }
+
+  body {
+    background-color: var(--sdg-color-background);
+  }
+
+  @include overrides.igo2-lib-overrides();
+  @include overrides.material-overrides();
+}
+
+@mixin _system-level-elevation() {
+  $elevations: sys-elevation.sys-elevation-values();
+  @include token-utils.values($elevations);
+}
+
+@mixin _system-colors() {
+  $palettes: sys-palettes.sys-palette-values();
+  $colors: sys-colors.sys-color-values();
+
+  @include token-utils.values(map.merge($palettes, $colors));
+}
+
+@mixin _system-dark-colors() {
+  @include token-utils.values(sys-colors.sys-dark-color-values());
+}
+
+@mixin _system-typographies() {
+  $typography: sys-typography.sys-typography-values();
+  @include token-utils.values($typography);
+}
+
+@mixin _system-layout() {
+  $values: sys-layout.sys-layout-values();
+  @include token-utils.values($values);
+}

package/src/tokens/_token-utils.scss

@@ -0,0 +1,79 @@
+/**
+ * Most of the code is inspired or from @angular/material
+ * https://github.com/angular/components/tree/main/src/material/core/tokens/_token-utils.scss
+ */
+
+@use 'sass:map';
+@use '../style/sass-utils';
+
+// Creates a CSS variable, including the fallback if provided.
+@function _create-var($name, $fallback: null) {
+  @if ($fallback) {
+    @return var($name, $fallback);
+  } @else {
+    @return var($name);
+  }
+}
+
+// Returns the token slot value.
+// Accepts an optional fallback parameter to include in the CSS variable.
+// If $fallback is `true`, then use the tokens map to get the fallback.
+@function slot($token, $fallbacks, $fallback: null) {
+  // Fallbacks are a map of base, color, typography, and density tokens. To simplify
+  // lookup, flatten these token groups into a single map.
+  $fallbacks-flattened: ();
+  @each $tokens in map.values($fallbacks) {
+    @each $token, $value in $tokens {
+      $fallbacks-flattened: map.set($fallbacks-flattened, $token, $value);
+    }
+  }
+  @if not map.has-key($fallbacks-flattened, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are:' +
+        #{map.keys($fallbacks-flattened)};
+  }
+
+  $sys-fallback: map.get($fallbacks-flattened, $token);
+  @if (sass-utils.is-css-var-name($sys-fallback)) {
+    $sys-fallback: _create-var($sys-fallback, $fallback);
+  }
+
+  @return _create-var(--sdg-#{$token}, $sys-fallback);
+}
+
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include sass-utils.current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --sdg-#{$key}: #{$value};
+      }
+    }
+  }
+}
+
+// Flattens a nested map, concatenating keys with '-' and returning a flat map.
+@function flatten-tokens-map($map, $prefix: '') {
+  $result: ();
+  @each $key, $value in $map {
+    $full-key: if($prefix != '', $prefix + '-' + $key, $key);
+    @if type-of($value) == 'map' {
+      $nested: flatten-tokens-map($value, $full-key);
+      @each $nkey, $nvalue in $nested {
+        $result: map.merge(
+          $result,
+          (
+            $nkey: $nvalue
+          )
+        );
+      }
+    } @else {
+      $result: map.merge(
+        $result,
+        (
+          $full-key: $value
+        )
+      );
+    }
+  }
+  @return $result;
+}

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

@@ -1,13 +0,0 @@
-@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/_search-bar-theme.scss

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

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

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

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

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

@@ -1,81 +0,0 @@
-@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 {
-    @include mat.button-overrides(
-      (
-        filled-container-height: 56px,
-        outlined-container-height: 56px,
-        protected-container-height: 56px,
-        text-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 {
-    $font-size: mat.m2-font-size(typography.$typography, body-1);
-
-    @include mat.button-overrides(
-      (
-        filled-label-text-size: $font-size,
-        filled-label-text-weight: bold,
-        outlined-label-text-size: $font-size,
-        outlined-label-text-weight: bold,
-        protected-label-text-size: $font-size,
-        protected-label-text-weight: bold,
-        text-label-text-size: $font-size,
-        text-label-text-weight: bold
-      )
-    );
-
-    line-height: mat.m2-line-height(typography.$typography, body-1) !important;
-  }
-}

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

@@ -1,13 +0,0 @@
-@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/button.scss

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

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

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

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

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

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