@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/theme/palettes/_palette.scss

@@ -0,0 +1,189 @@
+$palette: (
+  primary: (
+    0: #000000,
+    10: #180e54,
+    20: #2d2669,
+    25: #383275,
+    30: #443e81,
+    35: #504a8d,
+    40: #625d9c,
+    // 6e68ae is not accessible if not on white
+    // 600 5e5994
+    50: #756fb5,
+    60: #8f88d1,
+    70: #a9a3ee,
+    80: #c6c0ff,
+    90: #f1f0fc,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    5: #100f1d,
+    10: #1b1a28,
+    15: #262432,
+    20: #302f3d,
+    25: #3b3a49,
+    30: #474555,
+    35: #535161,
+    40: #5f5c6d,
+    50: #787586,
+    60: #928fa0,
+    70: #aca9bb,
+    80: #c8c4d7,
+    90: #e4e0f4,
+    95: #f3eeff,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+
+  tertiary: (
+    0: #000000,
+    10: #610047,
+    20: #7e024a,
+    25: #a80e4f,
+    30: #c40149,
+    35: #d20a5c,
+    40: #eb142a,
+    50: #de2174,
+    60: #fb6889,
+    70: #fa7ca0,
+    80: #fb95ad,
+    90: #fcedf9,
+    95: #fcedfc,
+    98: #fcedf4,
+    99: #fff6fa,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #0e0e0e,
+    6: #161616,
+    10: #242424,
+    12: #282829,
+    17: #343334,
+    20: #3a3a3b,
+    22: #3f3e40,
+    24: #444244,
+    25: #464446,
+    30: #514f52,
+    35: #5c5a5e,
+    40: #686569,
+    50: #7e7a80,
+    60: #949097,
+    70: #aba6ae,
+    80: #c2bbc5,
+    87: #d1cbd5,
+    90: #d8d1dc,
+    92: #ece6f0,
+    94: #f3edf7,
+    95: #f5f0f8,
+    96: #f7f2fa,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    5: #111016,
+    10: #1c1b21,
+    15: #26252b,
+    20: #313036,
+    25: #3c3a41,
+    30: #47464d,
+    35: #535158,
+    40: #5f5d65,
+    50: #78767d,
+    60: #928f97,
+    70: #adaab2,
+    80: #d7d5ed,
+    90: #e5e1e9,
+    95: #f3eff8,
+    98: #fcf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #4c0e08,
+    20: #7f1b11,
+    25: #992216,
+    30: #b3291a,
+    35: #bc2411,
+    40: #bf2600,
+    // fixed
+    50: #cc4d2e,
+    60: #d9755c,
+    70: #e59c8a,
+    80: #f2c4b7,
+    90: #ffebe6,
+    // fixed
+    95: #fff1ec,
+    98: #fff7f5,
+    99: #fffcfa,
+    100: #ffffff,
+    // fixed
+  ),
+  info: (
+    0: #000000,
+    10: #0e006a,
+    20: #1c00a6,
+    25: #2300c6,
+    30: #301ed3,
+    35: #3e32de,
+    40: #463ce5,
+    50: #4d66ea,
+    60: #6782ef,
+    70: #8ba4f5,
+    80: #b0c6f9,
+    90: #d6e7fc,
+    95: #e8f2fe,
+    98: #f4f8ff,
+    99: #fafcff,
+    100: #ffffff,
+  ),
+  warn: (
+    0: #000000,
+    10: #401a01,
+    20: #7f3402,
+    25: #9f4102,
+    30: #bf4e03,
+    // fixed
+    35: #c14e02,
+    40: #c75300,
+    // fixed
+    50: #dc7520,
+    60: #f09740,
+    70: #f9ba70,
+    80: #fbdcb0,
+    90: #fff4eb,
+    // fixed
+    95: #fff7f1,
+    98: #fffaf7,
+    99: #fffcfa,
+    100: #ffffff,
+  ),
+  success: (
+    0: #000000,
+    10: #002110,
+    20: #00391f,
+    25: #004527,
+    30: #00522f,
+    35: #005f37,
+    40: #328154,
+    // moved from 50 to 40
+    50: #5cb280,
+    60: #72c092,
+    70: #88cfa5,
+    80: #9eddb7,
+    90: #ebfff4,
+    // replaced previous bright green with this
+    95: #f3fff8,
+    98: #f8fffaf6,
+    99: #fbfffd,
+    100: #ffffff,
+  ),
+);

package/theme/utilities/_animations.scss

@@ -0,0 +1,54 @@
+@mixin animations() {
+  @keyframes fade {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+      text-align: left;
+      width: auto;
+      margin-left: 4px;
+      vertical-align: top;
+    }
+  }
+
+  @keyframes spin {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  // CSS Animation Keyframes
+  @keyframes progress {
+    0% {
+      transform: translate3d(-200px, 0, 0);
+    }
+    100% {
+      transform: translate3d(calc(200px + 100vw), 0, 0);
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/theme/utilities/_container.scss

@@ -0,0 +1,14 @@
+@use './media' as media;
+@use 'sass:map';
+
+@mixin theme() {
+  .content-container {
+    width: 95%;
+    max-width: 1400px;
+    padding: var(--double-spacer);
+    margin: auto;
+    h1 {
+      margin-top: 0;
+    }
+  }
+}

package/theme/utilities/_fonts.scss

@@ -0,0 +1,170 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin theme() {
+  @at-root {
+    @import url('https://cdn.services.rvaonem.fgov.be/font/poppins/import.css');
+    @import url('https://cdn.services.rvaonem.fgov.be/font/source-sans-pro/import.css');
+    @import url('https://cdn.services.rvaonem.fgov.be/font/material/import.css');
+  }
+
+  & {
+    font: var(--mat-sys-body-medium);
+  }
+  h1 {
+    font: var(--mat-sys-display-small);
+  }
+  h2 {
+    font: var(--mat-sys-headline-large);
+  }
+  h3 {
+    font: var(--mat-sys-headline-medium);
+  }
+  h4 {
+    font: var(--mat-sys-headline-small);
+  }
+  h5 {
+    font: var(--mat-sys-title-large);
+  }
+  h6 {
+    font: var(--mat-sys-title-medium);
+  }
+  a {
+    cursor: pointer;
+    color: var(--mat-sys-primary);
+    font-weight: var(--mat-sys-label-large-weight);
+  }
+  .bold {
+    font-weight: bold;
+  }
+  .bolder {
+    font-weight: bolder;
+  }
+  .lighter {
+    font-weight: lighter;
+  }
+  .font-weight-normal {
+    font-weight: normal;
+  }
+
+  @include mat.theme-overrides(
+    (
+      body-large: 400 1rem/1.625rem Source Sans Pro,
+      body-large-font: Source Sans Pro,
+      body-large-size: 1rem,
+      body-large-line-height: 1.625rem,
+      body-large-weight: 600,
+
+      body-medium: 400 1rem/1.625rem Source Sans Pro,
+      body-medium-font: Source Sans Pro,
+      body-medium-size: 1rem,
+      body-medium-line-height: 1.625rem,
+      body-medium-weight: 400,
+
+      body-small: 400 0.875rem/1.3125rem Source Sans Pro,
+      body-small-font: Source Sans Pro,
+      body-small-size: 0.875rem,
+      body-small-line-height: 1.3125rem,
+      body-small-weight: 400,
+
+      display-small: 600 2rem/3.25rem Poppins,
+      display-small-font: Poppins,
+      display-small-size: 2rem,
+      display-small-line-height: 3.25rem,
+      display-small-weight: 600,
+
+      display-medium: 700 4.5rem/6.25rem Poppins,
+      display-medium-font: Poppins,
+      display-medium-size: 4.5rem,
+      display-medium-line-height: 6.25rem,
+      display-medium-weight: 700,
+
+      display-large: 700 9.25rem/11.25rem Poppins,
+      display-large-font: Poppins,
+      display-large-size: 9.25rem,
+      display-large-line-height: 11.25rem,
+      display-large-weight: 700,
+
+      headline-small: 600 1.25rem/2.25rem Poppins,
+      headline-small-font: Poppins,
+      headline-small-size: 1.25rem,
+      headline-small-line-height: 2.25rem,
+      headline-small-weight: 600,
+
+      headline-medium: 600 1.5rem/2.5rem Poppins,
+      headline-medium-font: Poppins,
+      headline-medium-size: 1.5rem,
+      headline-medium-line-height: 2.5rem,
+      headline-medium-weight: 600,
+
+      headline-large: 600 1.625rem/2.75rem Poppins,
+      headline-large-font: Poppins,
+      headline-large-size: 1.625rem,
+      headline-large-line-height: 2.75rem,
+      headline-large-weight: 600,
+
+      label-large: 500 1rem/1.3125rem Source Sans Pro,
+      label-large-font: Source Sans Pro,
+      label-large-size: 1rem,
+      label-large-line-height: 1.3125rem,
+      label-large-weight: 500,
+
+      label-medium: 400 0.875rem/1.3125rem Source Sans Pro,
+      label-medium-font: Source Sans Pro,
+      label-medium-size: 0.875rem,
+      label-medium-line-height: 1.3125rem,
+      label-medium-weight: 400,
+
+      label-small: 400 0.75rem/1.125rem Source Sans Pro,
+      label-small-font: Source Sans Pro,
+      label-small-size: 0.75rem,
+      label-small-line-height: 1.125rem,
+      label-small-weight: 400,
+
+      title-small: 600 0.75rem/1.3125rem Poppins,
+      title-small-font: Poppins,
+      title-small-size: 0.75rem,
+      title-small-line-height: 1.3125rem,
+      title-small-weight: 600,
+
+      title-medium: 600 1rem/1.75rem Poppins,
+      title-medium-font: Poppins,
+      title-medium-size: 1rem,
+      title-medium-line-height: 1.75rem,
+      title-medium-weight: 600,
+
+      title-large: 600 1.125rem/2rem Poppins,
+      title-large-font: Poppins,
+      title-large-size: 1.125rem,
+      title-large-line-height: 2rem,
+      title-large-weight: 600,
+
+      level1: 0px 3px 3px 0px rgba(49, 47, 59, 0.32),
+      level2: 0px 3px 3px 0px rgba(49, 47, 59, 0.32),
+      level3: 0px 2px 6px 0px rgba(0, 0, 0, 0.32),
+      level4: 0px 3px 6px 0px rgba(0, 0, 0, 0.16),
+    )
+  );
+}
+/* ANGULAR DEFAULTS
+    --mat-sys-body-small: 400 .75rem / 1rem Roboto;
+    --mat-sys-body-medium: 400 .875rem / 1.25rem Roboto;
+    --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
+
+    --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
+    --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
+    --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
+
+    --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
+    --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
+    --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
+
+    --mat-sys-label-small: 500 .688rem / 1rem Roboto;
+    --mat-sys-label-medium: 500 .75rem / 1rem Roboto;
+    --mat-sys-label-large: 500 .875rem / 1.25rem Roboto;
+
+    --mat-sys-title-small: 500 .875rem / 1.25rem Roboto;
+    --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
+    --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
+
+ */

package/theme/utilities/_grid.scss

@@ -0,0 +1,75 @@
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:list';
+
+@mixin colrules($suffix: '') {
+  @for $i from 0 through 12 {
+    $width: 0;
+    @if $i > 0 {
+      $width: calc(100 / 12) * $i;
+    }
+    .col-#{$i}#{$suffix} {
+      flex: 0 0 auto !important;
+      width: $width + 0% !important;
+    }
+    .offset-#{$i}#{$suffix} {
+      margin-left: $width + 0% !important;
+    }
+  }
+}
+@mixin grid() {
+  .row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+
+    --bs-gutter-x: 0 !important;
+    --bs-gutter-y: 0 !important;
+
+    & > * {
+      flex-shrink: 0 !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      padding-right: var(--bs-gutter-x) !important;
+      padding-left: var(--bs-gutter-x) !important;
+      margin-top: var(--bs-gutter-y) !important;
+    }
+    .col,
+    .col-auto,
+    div[class^='col-'],
+    div[class*=' col-'] {
+      border: none;
+      box-sizing: border-box !important;
+      display: block !important;
+    }
+    .col,
+    .col-auto {
+      width: auto !important;
+      flex: 1 0 0 !important;
+    }
+    .offset-auto {
+      margin-left: auto !important;
+    }
+
+    @include colrules();
+
+    @each $breakpoint in variables.$breakpoints {
+      @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+        $sfx: -#{list.nth($breakpoint, 1)};
+        @include colrules($sfx);
+      }
+    }
+  }
+  @each $spacer in variables.$spacers {
+    .gx#{list.nth($spacer, 1)},
+    .g#{list.nth($spacer, 1)} {
+      --bs-gutter-x: #{list.nth($spacer, 2)} !important;
+    }
+    .gy#{list.nth($spacer, 1)},
+    .g#{list.nth($spacer, 1)} {
+      --bs-gutter-y: #{list.nth($spacer, 2)} !important;
+    }
+  }
+}

package/theme/utilities/_media.scss

@@ -0,0 +1,33 @@
+@use '../utilities/variables' as variables;
+@use 'sass:map';
+
+@mixin media($breakpoints, $from, $to: false) {
+  $min: false;
+  $max: false;
+  @if $from {
+    $min: map.get(map.get(variables.$breakpoints, $from), min);
+  }
+  @if $to {
+    $max: map.get(map.get(variables.$breakpoints, $to), max);
+  }
+
+  @if $min {
+    @if $max {
+      @media (min-width: #{$min}px) and (max-width: #{$max}px) {
+        @content;
+      }
+    } @else {
+      @media (min-width: #{$min}px) {
+        @content;
+      }
+    }
+  } @else {
+    @if $max {
+      @media (max-width: #{$max}px) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}

package/theme/utilities/_palettes.scss

@@ -0,0 +1,120 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use '../palettes/palette' as palette;
+
+$_rest: (
+  secondary: map.get(palette.$palette, secondary),
+  neutral: map.get(palette.$palette, neutral),
+  'neutral-variant': map.get(palette.$palette, 'neutral-variant'),
+  error: map.get(palette.$palette, error),
+);
+
+$primary-palette: map.merge(map.get(palette.$palette, primary), $_rest);
+$secondary-palette: map.merge(map.get(palette.$palette, secondary), $_rest);
+$tertiary-palette: map.merge(map.get(palette.$palette, tertiary), $_rest);
+$success-palette: map.merge(map.get(palette.$palette, success), $_rest);
+$warn-palette: map.merge(map.get(palette.$palette, warn), $_rest);
+$info-palette: map.merge(map.get(palette.$palette, info), $_rest);
+$error-palette: map.merge(map.get(palette.$palette, error), $_rest);
+$neutral-palette: map.merge(
+  map.get(palette.$palette, 'neutral-variant'),
+  $_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(#292264, #f2eeff, $theme-type),
+//      on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      primary-container: _high-contrast-value(#464083, #c2bbff, $theme-type),
+//      on-primary-container: _high-contrast-value(#ffffff, #080039, $theme-type),
+//      inverse-primary: _high-contrast-value(#c6c0ff, #453f82, $theme-type),
+//      primary-fixed: _high-contrast-value(#464083, #e4dfff, $theme-type),
+//      primary-fixed-dim: _high-contrast-value(#2f296b, #c6c0ff, $theme-type),
+//      on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      on-primary-fixed-variant: _high-contrast-value(
+//          #ffffff,
+//          #0c0049,
+//          $theme-type
+//        ),
+//      secondary: _high-contrast-value(#600009, #ffecea, $theme-type),
+//      on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      secondary-container: _high-contrast-value(#970014, #ffaea7, $theme-type),
+//      on-secondary-container: _high-contrast-value(
+//          #ffffff,
+//          #220001,
+//          $theme-type
+//        ),
+//      secondary-fixed: _high-contrast-value(#970014, #ffdad7, $theme-type),
+//      secondary-fixed-dim: _high-contrast-value(#6d000b, #ffb3ad, $theme-type),
+//      on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      on-secondary-fixed-variant: _high-contrast-value(
+//          #ffffff,
+//          #2d0002,
+//          $theme-type
+//        ),
+//      tertiary: _high-contrast-value(#00341c, #bdffd1, $theme-type),
+//      on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      tertiary-container: _high-contrast-value(#005530, #78d69c, $theme-type),
+//      on-tertiary-container: _high-contrast-value(#ffffff, #000f05, $theme-type),
+//      tertiary-fixed: _high-contrast-value(#005530, #97f6ba, $theme-type),
+//      tertiary-fixed-dim: _high-contrast-value(#003b20, #7cdaa0, $theme-type),
+//      on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      on-tertiary-fixed-variant: _high-contrast-value(
+//          #ffffff,
+//          #001508,
+//          $theme-type
+//        ),
+//      background: _high-contrast-value(#fbf8ff, #131319, $theme-type),
+//      on-background: _high-contrast-value(#1b1b21, #e4e1ea, $theme-type),
+//      surface: _high-contrast-value(#fbf8ff, #131319, $theme-type),
+//      surface-dim: _high-contrast-value(#bab8c0, #131319, $theme-type),
+//      surface-bright: _high-contrast-value(#fbf8ff, #504f56, $theme-type),
+//      surface-container-lowest: _high-contrast-value(
+//          #ffffff,
+//          #000000,
+//          $theme-type
+//        ),
+//      surface-container: _high-contrast-value(#e4e1ea, #303036, $theme-type),
+//      surface-container-high: _high-contrast-value(
+//          #d6d3db,
+//          #3b3b41,
+//          $theme-type
+//        ),
+//      surface-container-highest: _high-contrast-value(
+//          #c8c5cd,
+//          #47464d,
+//          $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(#6e68ae, #c6c0ff, $theme-type),
+//      inverse-surface: _high-contrast-value(#303036, #e4e1ea, $theme-type),
+//      inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      outline: _high-contrast-value(#19009a, #f1eeff, $theme-type),
+//      outline-variant: _high-contrast-value(#3322d5, #bebcff, $theme-type),
+//      error: _high-contrast-value(#5b0d00, #ffece8, $theme-type),
+//      on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
+//      error-container: _high-contrast-value(#901a00, #ffaf9c, $theme-type),
+//      on-error-container: _high-contrast-value(#ffffff, #200200, $theme-type),
+//      surface-variant: _high-contrast-value(#e2dfff, #301ed3, $theme-type),
+//      on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
+//    )
+//  );
+//}