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

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

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../tokens/sys-colors';
+
+@mixin overrides() {
+  @include mat.divider-overrides(
+    (
+      color: rgba(map.get(sys-colors.$light-colors, 'black'), 0.12)
+    )
+  );
+}

package/src/style/overrides/material/_form-field.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../tokens/sys-colors';
+
+@mixin overrides() {
+  .mat-mdc-text-field-wrapper,
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__trailing {
+    border-radius: 0 !important;
+  }
+
+  @include mat.form-field-overrides(
+    (
+      outlined-outline-color: rgba(
+          map.get(sys-colors.$light-colors, 'black'),
+          0.38
+        )
+    )
+  );
+}

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

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  @include color-variants-backwards-compatibility();
+}
+
+// Material custom color variants backwards compatibility
+@mixin color-variants-backwards-compatibility() {
+  .mat-icon {
+    &.mat-accent {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-pink-normal)
+        )
+      );
+    }
+
+    &.mat-primary {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-blue-piv)
+        )
+      );
+    }
+
+    &.mat-warn {
+      @include mat.icon-overrides(
+        (
+          color: var(--sdg-color-red-normal)
+        )
+      );
+    }
+  }
+}

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

@@ -1,6 +1,17 @@
 @use './button';
 @use './dialog';
+@use './divider';
 @use './form-field';
+@use './icon';
 @use './input';
+@use './sidenav';
 
-@forward './index-theme' as override-material-*;
+@mixin overrides() {
+  @include button.overrides();
+  @include dialog.overrides();
+  @include divider.overrides();
+  @include form-field.overrides();
+  @include icon.overrides();
+  @include input.overrides();
+  @include sidenav.overrides();
+}

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

@@ -0,0 +1,5 @@
+@mixin overrides() {
+  .mat-mdc-input-element {
+    color: var(--sdg-color-grey-medium) !important;
+  }
+}

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

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin overrides() {
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 0
+    )
+  );
+}

package/src/theme/_index.scss

@@ -1,3 +1 @@
-@forward './colors';
-@forward './palettes';
-@forward './theme';
+@forward './material' as material-*;

package/src/theme/material/_index.scss

@@ -0,0 +1 @@
+@forward './theme';

package/src/theme/material/_theme.scss

@@ -0,0 +1,241 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use 'sass:color';
+@use '../../tokens/sys-palettes';
+@use '../../tokens/sys-typography';
+
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+// Note: Color palettes are generated from primary: #095797, error: #bb3a23
+// But was adjusted manually to fit the _sys_palette.scss files
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: map.get(sys-palettes.$palettes, 'blue', 800),
+    20: map.get(sys-palettes.$palettes, 'blue', 700),
+    25: color.adjust(
+        map.get(sys-palettes.$palettes, 'blue', 700),
+        $lightness: 1%
+      ),
+    30: color.adjust(
+        map.get(sys-palettes.$palettes, 'blue', 700),
+        $lightness: 2%
+      ),
+    35: map.get(sys-palettes.$palettes, 'blue', 650),
+    // Button background
+    40: map.get(sys-palettes.$palettes, 'blue', 600),
+    50: map.get(sys-palettes.$palettes, 'blue', 550),
+    60: map.get(sys-palettes.$palettes, 'blue', 500),
+    70: map.get(sys-palettes.$palettes, 'blue', 400),
+    80: map.get(sys-palettes.$palettes, 'blue', 350),
+    90: map.get(sys-palettes.$palettes, 'blue', 300),
+    95: map.get(sys-palettes.$palettes, 'blue', 200),
+    98: map.get(sys-palettes.$palettes, 'blue', 150),
+    99: map.get(sys-palettes.$palettes, 'blue', 100),
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #061c34,
+    20: #1d314a,
+    25: #293d56,
+    30: #344861,
+    35: #40546e,
+    40: #4c607a,
+    50: #657894,
+    60: #7e92af,
+    70: #99adca,
+    80: #b4c8e7,
+    90: #d3e4ff,
+    95: #eaf1ff,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c20,
+    20: #2e3035,
+    25: #393b40,
+    30: #44474c,
+    35: #505257,
+    40: #5c5e63,
+    50: #75777c,
+    60: #8f9196,
+    70: #a9abb1,
+    80: #c5c6cc,
+    90: #e1e2e8,
+    95: #f0f0f6,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+    4: #0c0e12,
+    6: #111418,
+    12: #1d2024,
+    17: #272a2f,
+    22: #323539,
+    24: #37393e,
+    87: #d9dae0,
+    92: #e7e8ee,
+    94: #ededf4,
+    96: #f2f3f9
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c24,
+    20: #2b3139,
+    25: #363c45,
+    30: #414750,
+    35: #4d535c,
+    40: #595f68,
+    50: #727781,
+    60: #8b919b,
+    70: #a6abb6,
+    80: #c1c7d2,
+    90: #dee3ee,
+    95: #ecf1fc,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: map.get(sys-palettes.$palettes, 'red', 800),
+    20: color.adjust(
+        map.get(sys-palettes.$palettes, 'red', 800),
+        $lightness: 2%
+      ),
+    25: map.get(sys-palettes.$palettes, 'red', 700),
+    30: color.adjust(
+        map.get(sys-palettes.$palettes, 'red', 700),
+        $lightness: 2%
+      ),
+    35: map.get(sys-palettes.$palettes, 'red', 550),
+    40: color.adjust(
+        map.get(sys-palettes.$palettes, 'red', 550),
+        $lightness: 2%
+      ),
+    50: map.get(sys-palettes.$palettes, 'red', 500),
+    60: map.get(sys-palettes.$palettes, 'red', 400),
+    70: map.get(sys-palettes.$palettes, 'red', 300),
+    80: map.get(sys-palettes.$palettes, 'red', 200),
+    90: map.get(sys-palettes.$palettes, 'red', 50),
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+
+@function _high-contrast-value($light, $dark, $theme-type) {
+  @if ($theme-type == light) {
+    @return $light;
+  }
+  @if ($theme-type == dark) {
+    @return $dark;
+  }
+  @if ($theme-type == color-scheme) {
+    @return light-dark(#{$light}, #{$dark});
+  }
+
+  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
+}
+
+@mixin high-contrast-overrides($theme-type) {
+  @include mat.theme-overrides(
+    (
+      primary: _high-contrast-value(#002d54, #e9f0ff, $theme-type),
+      on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      primary-container: _high-contrast-value(#004b85, #9ac5ff, $theme-type),
+      on-primary-container: _high-contrast-value(#ffffff, #000c1c, $theme-type),
+      inverse-primary: _high-contrast-value(#a2c9ff, #004982, $theme-type),
+      primary-fixed: _high-contrast-value(#004b85, #d3e4ff, $theme-type),
+      primary-fixed-dim: _high-contrast-value(#00345f, #a2c9ff, $theme-type),
+      on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-primary-fixed-variant: _high-contrast-value(
+          #ffffff,
+          #001226,
+          $theme-type
+        ),
+      secondary: _high-contrast-value(#192d45, #e9f0ff, $theme-type),
+      on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      secondary-container: _high-contrast-value(#374a64, #b0c4e3, $theme-type),
+      on-secondary-container: _high-contrast-value(
+          #ffffff,
+          #000c1c,
+          $theme-type
+        ),
+      secondary-fixed: _high-contrast-value(#374a64, #d3e4ff, $theme-type),
+      secondary-fixed-dim: _high-contrast-value(#20344c, #b4c8e7, $theme-type),
+      on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-secondary-fixed-variant: _high-contrast-value(
+          #ffffff,
+          #001226,
+          $theme-type
+        ),
+      tertiary: _high-contrast-value(#46135a, #feeaff, $theme-type),
+      on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      tertiary-container: _high-contrast-value(#67337a, #eaadfd, $theme-type),
+      on-tertiary-container: _high-contrast-value(#ffffff, #190025, $theme-type),
+      tertiary-fixed: _high-contrast-value(#67337a, #f9d8ff, $theme-type),
+      tertiary-fixed-dim: _high-contrast-value(#4e1b61, #edb1ff, $theme-type),
+      on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-tertiary-fixed-variant: _high-contrast-value(
+          #ffffff,
+          #220031,
+          $theme-type
+        ),
+      background: _high-contrast-value(#f8f9ff, #111418, $theme-type),
+      on-background: _high-contrast-value(#191c20, #e1e2e8, $theme-type),
+      surface: _high-contrast-value(#f8f9ff, #111418, $theme-type),
+      surface-dim: _high-contrast-value(#b7b8be, #111418, $theme-type),
+      surface-bright: _high-contrast-value(#f8f9ff, #4e5055, $theme-type),
+      surface-container-low: _high-contrast-value(#f0f0f6, #1d2024, $theme-type),
+      surface-container-lowest: _high-contrast-value(
+          #ffffff,
+          #000000,
+          $theme-type
+        ),
+      surface-container: _high-contrast-value(#e1e2e8, #2e3035, $theme-type),
+      surface-container-high: _high-contrast-value(
+          #d3d4da,
+          #393b40,
+          $theme-type
+        ),
+      surface-container-highest: _high-contrast-value(
+          #c5c6cc,
+          #44474c,
+          $theme-type
+        ),
+      on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
+      shadow: _high-contrast-value(#000000, #000000, $theme-type),
+      scrim: _high-contrast-value(#000000, #000000, $theme-type),
+      surface-tint: _high-contrast-value(#1c60a1, #a2c9ff, $theme-type),
+      inverse-surface: _high-contrast-value(#2e3035, #e1e2e8, $theme-type),
+      inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
+      outline: _high-contrast-value(#272c35, #ebf0fc, $theme-type),
+      outline-variant: _high-contrast-value(#444953, #bec3ce, $theme-type),
+      error: _high-contrast-value(#5d0900, #ffece8, $theme-type),
+      on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
+      error-container: _high-contrast-value(#901a06, #ffaf9e, $theme-type),
+      on-error-container: _high-contrast-value(#ffffff, #200100, $theme-type),
+      surface-variant: _high-contrast-value(#dee3ee, #414750, $theme-type),
+      on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type)
+    )
+  );
+}
+
+$theme: (
+  color: $primary-palette,
+  typography: var(--sdg-font-family-text),
+  density: 0
+);

package/src/tokens/_index.scss

@@ -0,0 +1,7 @@
+@forward './sys-colors';
+@forward './sys-elevation';
+@forward './sys-layout';
+@forward './sys-palettes';
+@forward './sys-typography';
+@forward './system';
+@forward './token-utils';

package/src/tokens/_sys-colors.scss

@@ -0,0 +1,99 @@
+@use 'sass:map';
+@use './token-utils';
+@use './sys-palettes';
+
+$light-colors: (
+  'blue': (
+    pale: map.get(sys-palettes.$palettes, 'blue', 100),
+    light: map.get(sys-palettes.$palettes, 'blue', 350),
+    normal: map.get(sys-palettes.$palettes, 'blue', 550),
+    piv: map.get(sys-palettes.$palettes, 'blue', 600),
+    medium: map.get(sys-palettes.$palettes, 'blue', 650),
+    dark: map.get(sys-palettes.$palettes, 'blue', 700)
+  ),
+  'grey': (
+    pale: map.get(sys-palettes.$palettes, 'grey', 100),
+    light: map.get(sys-palettes.$palettes, 'grey', 200),
+    normal: map.get(sys-palettes.$palettes, 'grey', 350),
+    medium: map.get(sys-palettes.$palettes, 'grey', 450),
+    dark: map.get(sys-palettes.$palettes, 'grey', 600)
+  ),
+  'pink': (
+    pale: map.get(sys-palettes.$palettes, 'red', 50),
+    normal: map.get(sys-palettes.$palettes, 'red', 300)
+  ),
+  'red': (
+    normal: map.get(sys-palettes.$palettes, 'red', 500),
+    dark: map.get(sys-palettes.$palettes, 'red', 800)
+  ),
+  'green': (
+    pale: map.get(sys-palettes.$palettes, 'green', 100),
+    normal: map.get(sys-palettes.$palettes, 'green', 500),
+    dark: map.get(sys-palettes.$palettes, 'green', 600)
+  ),
+  'yellow': (
+    pale: map.get(sys-palettes.$palettes, 'yellow', 100),
+    normal: map.get(sys-palettes.$palettes, 'yellow', 400),
+    dark: map.get(sys-palettes.$palettes, 'yellow', 600)
+  ),
+  'violet': (
+    normal: map.get(sys-palettes.$palettes, 'violet', 500)
+  ),
+  'white': #ffffff,
+  'black': #000000,
+  accent: map.get(sys-palettes.$palettes, 'red', 300),
+  text: var(--sdg-color-blue-dark),
+  background: var(--sdg-color-white)
+);
+
+// https://design.quebec.ca/design/bases/theme-sombre
+$dark-colors: (
+  blue: (
+    pale: map.get(sys-palettes.$palettes, 'blue', 800),
+    light: map.get(sys-palettes.$palettes, 'blue', 500),
+    normal: map.get(sys-palettes.$palettes, 'blue', 400),
+    piv: map.get(sys-palettes.$palettes, 'blue', 300),
+    medium: map.get(sys-palettes.$palettes, 'blue', 200),
+    dark: map.get(sys-palettes.$palettes, 'blue', 150)
+  ),
+  grey: (
+    pale: map.get(sys-palettes.$palettes, 'grey', 850),
+    light: map.get(sys-palettes.$palettes, 'grey', 700),
+    normal: map.get(sys-palettes.$palettes, 'grey', 500),
+    medium: map.get(sys-palettes.$palettes, 'grey', 400),
+    dark: map.get(sys-palettes.$palettes, 'grey', 300)
+  ),
+  pink: (
+    pale: map.get(sys-palettes.$palettes, 'red', 800),
+    normal: map.get(sys-palettes.$palettes, 'red', 550)
+  ),
+  red: (
+    normal: map.get(sys-palettes.$palettes, 'red', 400),
+    dark: map.get(sys-palettes.$palettes, 'red', 200)
+  ),
+  green: (
+    pale: map.get(sys-palettes.$palettes, 'green', 800),
+    normal: map.get(sys-palettes.$palettes, 'green', 400),
+    dark: map.get(sys-palettes.$palettes, 'green', 200)
+  ),
+  yellow: (
+    pale: map.get(sys-palettes.$palettes, 'yellow', 800),
+    normal: map.get(sys-palettes.$palettes, 'yellow', 650),
+    dark: map.get(sys-palettes.$palettes, 'yellow', 450)
+  ),
+  violet: (
+    normal: map.get(sys-palettes.$palettes, 'violet', 300)
+  ),
+  accent: map.get(sys-palettes.$palettes, 'red', 350),
+  text: map.get(sys-palettes.$palettes, 'grey', 150),
+  background: map.get(sys-palettes.$palettes, 'grey', 900)
+);
+
+@function sys-color-values() {
+  @return token-utils.flatten-tokens-map($light-colors, 'color');
+}
+
+@function sys-dark-color-values() {
+  $values: map.merge($light-colors, $dark-colors);
+  @return token-utils.flatten-tokens-map($values, 'color');
+}

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')
+  );
+}