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

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