@igo2/sdg-core 2.0.0-next.1 → 2.0.0-next.10

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

@@ -1,74 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin overrides() {
-  $blue-dark: var(--sdg-color-blue-dark);
-  $blue-piv: var(--sdg-color-blue-piv);
-  $grey-medium: var(--sdg-color-grey-medium);
-
-  $text-font: var(--sdg-font-family-text);
-  $text-line-height: var(--sdg-line-height-md);
-  $text-size: var(--sdg-font-size-md);
-
-  .mat-mdc-form-field {
-    @include mat.select-overrides(
-      (
-        enabled-trigger-text-color: $blue-dark,
-        enabled-arrow-color: $blue-piv,
-        //
-        disabled-trigger-text-color: $grey-medium,
-        disabled-arrow-color: var(--sdg-color-grey-normal),
-        //
-        placeholder-text-color: $grey-medium,
-        //
-        trigger-text-font: $text-font,
-        trigger-text-line-height: $text-line-height,
-        trigger-text-size: $text-size
-      )
-    );
-  }
-
-  .mat-mdc-select-panel {
-    @include mat.select-overrides(
-      (
-        container-elevation-shadow: none,
-        //
-        panel-background-color: var(--sdg-color-background)
-      )
-    );
-
-    padding: 0 !important;
-    border: 1px solid $grey-medium;
-    border-radius: 0 !important;
-
-    .mat-mdc-option {
-      min-height: 0;
-      padding: 8px;
-
-      .mdc-list-item__primary-text {
-        color: $blue-dark;
-        font-family: $text-font;
-        font-size: $text-size;
-        line-height: $text-line-height;
-      }
-
-      &:hover {
-        background-color: var(--sdg-color-grey-pale);
-      }
-
-      &-active {
-        background-color: var(--sdg-color-blue-pale) !important;
-      }
-    }
-
-    &::-webkit-scrollbar {
-      background-color: transparent;
-      width: 8px;
-      height: auto;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $blue-piv;
-      border-radius: 4px;
-    }
-  }
-}

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

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

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

@@ -1,95 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin overrides() {
-  .mat-mdc-tab-group {
-    $blue-piv: var(--sdg-color-blue-piv);
-    $blue-dark: var(--sdg-color-blue-dark);
-    $grey-pale: var(--sdg-color-grey-pale);
-
-    .mat-mdc-tab-labels {
-      column-gap: 24px;
-    }
-
-    .mdc-tab {
-      padding: 0 8px;
-      min-width: unset;
-
-      &--active {
-        font-weight: bold;
-      }
-
-      &:hover:not(&--active) {
-        .mdc-tab-indicator {
-          border-bottom: 4px solid $grey-pale;
-        }
-      }
-
-      &:focus {
-        .mdc-tab-indicator {
-          border: 2px solid var(--sdg-color-blue-light);
-        }
-      }
-    }
-
-    .mat-mdc-tab-header-pagination {
-      min-width: 40px;
-
-      &-after,
-      &-before {
-        padding: 0;
-      }
-
-      &-after {
-        .mat-mdc-tab-header-pagination-chevron {
-          transform: rotate(45deg) translateX(-2px);
-          height: 10px;
-          width: 10px;
-        }
-      }
-
-      &-before {
-        .mat-mdc-tab-header-pagination-chevron {
-          transform: rotate(225deg) translate(-2px, 2px);
-          height: 10px;
-          width: 10px;
-        }
-      }
-
-      &:hover {
-        background-color: $grey-pale;
-      }
-
-      &:active {
-        background-color: var(--sdg-color-blue-pale);
-      }
-    }
-
-    @include mat.tabs-overrides(
-      (
-        active-indicator-color: $blue-piv,
-        active-indicator-height: 4px,
-        active-hover-indicator-color: $blue-piv,
-        active-hover-label-text-color: $blue-dark,
-        active-focus-indicator-color: $blue-piv,
-        active-focus-label-text-color: $blue-dark,
-        active-ripple-color: transparent,
-        active-label-text-color: $blue-dark,
-        //
-        inactive-ripple-color: transparent,
-        inactive-label-text-color: $blue-piv,
-        inactive-focus-label-text-color: $blue-piv,
-        inactive-hover-label-text-color: $blue-piv,
-        //
-        divider-color: var(--sdg-color-grey-light),
-        divider-height: 1px,
-        //
-        label-text-size: var(--sdg-font-size-md),
-        label-text-line-height: var(--sdg-line-height-md),
-        //
-        pagination-icon-color: $blue-dark,
-        //
-        container-height: 40px
-      )
-    );
-  }
-}

package/src/theme/_index.scss

@@ -1 +0,0 @@
-@forward './material' as material-*;

package/src/theme/material/_index.scss

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

package/src/theme/material/_theme.scss

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