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

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

package/src/theme/_theme.scss

@@ -1,46 +0,0 @@
-@use '@angular/material' as mat;
-@use '../style/overrides';
-@use './palettes';
-@use '../typography';
-
-// https://design.quebec.ca/a-propos-systeme-design
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: mat.m2-define-palette(palettes.$primary-palette, 600, 400, 700),
-      accent: mat.m2-define-palette(palettes.$accent-palette, 500),
-      warn: mat.m2-define-palette(palettes.$warn-palette, 500),
-      success: mat.m2-define-palette(palettes.$primary-palette, 900)
-    ),
-    typography: typography.$typography,
-    density: 0
-  )
-);
-
-// Define an alternate dark theme.
-$dark-theme: mat.m2-define-dark-theme(
-  (
-    color: (
-      primary: mat.m2-define-palette(palettes.$primary-palette, 300, 100, 800),
-      accent: mat.m2-define-palette(palettes.$accent-palette, 400, 100, 800),
-      warn: mat.m2-define-palette(palettes.$warn-palette, 400, 200, 800)
-    ),
-    typography: typography.$typography,
-    density: 0
-  )
-);
-
-@mixin themes($theme) {
-  @include overrides.override-igo2-lib-themes($theme);
-  @include overrides.override-material-themes($theme);
-}
-
-@mixin colors($theme) {
-  @include overrides.override-igo2-lib-colors($theme);
-  @include overrides.override-material-colors($theme);
-}
-
-@mixin densities($theme) {
-  @include overrides.override-igo2-lib-densities($theme);
-  @include overrides.override-material-densities($theme);
-}

package/src/typography/_index.scss

@@ -1,2 +0,0 @@
-@forward './typography';
-@forward './typography.utils';

package/src/typography/typography.scss

@@ -1,173 +0,0 @@
-@use '@angular/material' as mat;
-@use '../theme/colors';
-@use '../theme/palettes';
-@use '../layout/breakpoints';
-@use './typography.utils' as typo-utils;
-
-// https://design.quebec.ca/bases/polices-caracteres
-// https://design.quebec.ca/bases/niveaux-titres
-// https://material.angular.io/guide/typography
-$font-family-text: 'Open Sans', sans-serif;
-$font-family-title: 'Roboto', sans-serif;
-
-$typography: mat.m2-define-typography-config(
-  $font-family: $font-family-text,
-  $headline-1: mat.m2-define-typography-level(110px, 110px, 500),
-  $headline-2: mat.m2-define-typography-level(54px, 54px, 500),
-  $headline-3: mat.m2-define-typography-level(43px, 46px, 500),
-  $headline-4: mat.m2-define-typography-level(32px, 38px, 500),
-  // h1
-  $headline-5: mat.m2-define-typography-level(48px, 56px, bold),
-  // h2
-  $headline-6: mat.m2-define-typography-level(36px, 40px, bold),
-  // h3
-  $subtitle-1: mat.m2-define-typography-level(28px, 32px, bold),
-  // h4
-  $subtitle-2: mat.m2-define-typography-level(21px, 24px, bold),
-  $body-1: mat.m2-define-typography-level(16px, 24px, 400),
-  $body-2: mat.m2-define-typography-level(12px, 18px, 400),
-  $caption: mat.m2-define-typography-level(12px, 18px, 400),
-  $button: mat.m2-define-typography-level(13px, 13px, 500)
-);
-
-$typography-mobile: mat.m2-define-typography-config(
-  // h1
-  $headline-5: mat.m2-define-typography-level(36px, 40px, bold),
-  // h2
-  $headline-6: mat.m2-define-typography-level(28px, 32px, bold),
-  // h3
-  $subtitle-1: mat.m2-define-typography-level(25px, 32px, bold)
-);
-
-$font-color: colors.$blue-dark;
-
-@mixin typo-set-base-styles {
-  body {
-    color: $font-color;
-  }
-
-  a {
-    word-break: break-word;
-    overflow-wrap: break-word;
-    cursor: pointer;
-    color: colors.$blue-piv;
-    text-decoration: underline;
-    background-color: transparent;
-    width: fit-content;
-    max-inline-size: breakpoints.$max-content-width;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  button {
-    font-family: $font-family-text;
-  }
-
-  p,
-  ul,
-  ol,
-  u,
-  .text {
-    color: $font-color;
-    font-size: 16px;
-    line-height: 24px;
-    max-inline-size: breakpoints.$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: $font-family-title !important;
-    color: $font-color;
-    max-inline-size: breakpoints.$max-content-width;
-  }
-
-  h1 {
-    margin-top: 72px !important;
-    margin-bottom: 32px !important;
-
-    @include typo-utils.title-border;
-
-    @include breakpoints.media(mobile) {
-      margin-top: 48px !important;
-      margin-bottom: 16px !important;
-    }
-  }
-
-  h2 {
-    margin-top: 48px !important;
-    margin-bottom: 16px !important;
-  }
-
-  h3 {
-    margin-top: 24px !important;
-    margin-bottom: 16px !important;
-  }
-
-  // WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
-  // https://github.com/angular/components/issues/26351
-  h4 {
-    @include typo-utils.title-level-4;
-  }
-
-  h4 {
-    margin-top: 24px !important;
-    margin-bottom: 8px !important;
-  }
-
-  h5 {
-    font-size: 19px !important;
-    line-height: 24px !important;
-  }
-
-  h6 {
-    font-size: 16px !important;
-    line-height: 20px !important;
-  }
-
-  h5,
-  h6 {
-    font-weight: bold !important;
-    margin-top: 16px !important;
-    margin-bottom: 0px !important;
-  }
-
-  .accroche {
-    font-size: 18px;
-    line-height: 28px;
-    font-weight: 600;
-    max-width: breakpoints.$max-content-width;
-    padding-bottom: 24px;
-  }
-}

package/src/typography/typography.utils.scss

@@ -1,18 +0,0 @@
-@use '../theme/colors';
-
-@mixin title-border {
-  &:after {
-    content: '';
-    display: block;
-    margin: 0;
-    width: 48px;
-    padding-top: 4px;
-    border-bottom: 4px solid colors.$pink;
-  }
-}
-
-@mixin title-level-4 {
-  font-size: 21px !important;
-  line-height: 24px !important;
-  font-weight: bold !important;
-}