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

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;
-}

package/src/theme/_colors.scss

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

@@ -1,112 +0,0 @@
-@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
-  )
-);