@onemrvapublic/design-system-theme 0.0.0-semantically-released

package/overrides/_stickers.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@mixin override() {
+  onemrva-mat-sticker {
+    .mat-icon {
+      $font-size: 0.8rem;
+      $icon-size: 1rem;
+      margin-right: var(--half-spacer);
+      height: $icon-size;
+      width: $icon-size;
+      font-size: $icon-size;
+    }
+  }
+}

package/overrides/_table.scss

@@ -0,0 +1,111 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+@mixin override() {
+  @include mat.table-overrides(
+    (
+      header-headline-size: 1rem,
+      header-headline-weight: 600,
+      row-item-label-text-size: 1rem,
+      footer-supporting-text-size: 1rem,
+      header-headline-font: var(--brand-font),
+    )
+  );
+
+  .mat-mdc-table {
+    &:not(.mat-card-table) {
+      tbody tr,
+      mat-row {
+        &:nth-child(odd) {
+          background-color: var(--mat-sys-primary-container);
+          // a {
+          //   color: var(--mat-sys-on-primary-container);
+          // }
+        }
+      }
+    }
+    th,
+    mat-header-row {
+      &.cdk-column-check {
+        width: 50px;
+        .mat-mdc-checkbox {
+          .mdc-checkbox {
+            padding: var(--spacer);
+          }
+        }
+      }
+      &.mat-mdc-header-cell {
+        vertical-align: bottom;
+        padding-bottom: var(--spacer);
+      }
+    }
+    tr,
+    mat-row {
+      transition: background-color 400ms ease-out;
+      &.onemrva-notice-row {
+        background: var(--mat-sys-surface-bright);
+      }
+      &.onemrva-clickable-row {
+        background: var(--mat-sys-primary-container);
+        color: var(--mat-sys-on-surface);
+        border-radius: var(--half-border-radius);
+        td:first-child {
+          border-radius: var(--half-border-radius) 0 0 var(--half-border-radius);
+        }
+        td:last-child {
+          border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0;
+          padding-right: var(--spacer);
+        }
+        td:only-child {
+          border-radius: var(--half-border-radius);
+        }
+
+        &.clickable:hover,
+        &.clickable:active {
+          box-shadow: var(--mat-sys-level2);
+        }
+      }
+    }
+
+    &.mat-card-table {
+      border-spacing: 0 var(--spacer) !important;
+      .mat-divider {
+        color: var(--mat-sys-surface-bright);
+        &.mat-divider-vertical {
+          display: inline-flex;
+          height: 1.5em;
+        }
+      }
+    }
+    tr {
+      padding: var(--double-spacer);
+    }
+    tr,
+    mat-row {
+      &:not(.cdk-drag-preview) {
+        transition: background-color 400ms ease-out;
+
+        td,
+        mat-cell {
+          &.mat-mdc-cell {
+            line-height: 1.5rem;
+            padding-top: var(--spacer);
+            padding-bottom: var(--spacer);
+            border-bottom: 1px solid var(--mat-sys-outline-variant);
+            &:not(:last-child) {
+              padding-right: var(--spacer-and-half);
+            }
+            mat-error {
+              line-height: 3rem;
+              color: var(--mat-sys-error);
+              mat-icon {
+                float: left;
+                margin-top: var(--spacer-and-half);
+                color: var(--mat-sys-error);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/overrides/_tabs.scss

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.tabs-overrides(
+    (
+      active-indicator-color: var(--mat-sys-secondary),
+      active-focus-indicator-color: var(--mat-sys-secondary),
+      active-hover-indicator-color: var(--mat-sys-secondary),
+      active-indicator-height: 3px,
+      label-text-font: var(--mat-sys-title-medium-font),
+      label-text-size: var(--mat-sys-title-medium-size),
+      label-text-weight: var(--mat-sys-title-medium-weight),
+      label-text-line-height: var(--mat-sys-title-medium-height),
+    )
+  );
+  .mat-mdc-tab-link {
+    &.mdc-tab--active {
+      .mdc-tab__text-label {
+        //text-shadow: 0 0 2px var(--mat-sys-on-surface); // THC HACK
+        font-weight: bold;
+      }
+    }
+  }
+}

package/overrides/_toast.scss

@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  //@include mat.snack-bar-overrides((
+  //  container-color: orange,
+  //  supporting-text-color: red,
+  //));
+
+  //.mat-mdc-tab-link {
+  //  &.mdc-tab--active {
+  //    .mdc-tab__text-label {
+  //      //text-shadow: 0 0 2px var(--mat-sys-on-surface); // THC HACK
+  //    }
+  //  }
+  //}
+}

package/overrides/_toc.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  .toc-content {
+    display: block;
+    padding-left: clamp(
+      var(--double-spacer),
+      var(--toc-width) - (100vw - 2200px),
+      var(--toc-width)
+    );
+
+    .onemrva-mat-toc-anchor {
+      scroll-margin-top: calc(
+        var(--layout-header-height) + var(--double-spacer)
+      );
+    }
+    mat-list-item {
+      &.onemrva-anchor-for-subsection {
+        .mdc-list-item__primary-text {
+          font-weight: 400;
+          padding-left: var(--double-spacer);
+        }
+      }
+    }
+  }
+}

package/overrides/_toolbar.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@mixin override() {
+  mat-toolbar {
+    &.sticky {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: var(--mat-sys-primary-container),
+        )
+      );
+      position: sticky !important;
+      bottom: 0 !important;
+      top: var(--layout-header-height, 0);
+      .spacer {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}

package/overrides/_tooltip.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.tooltip-overrides(
+    (
+      supporting-text-font: 'Source Sans Pro',
+      supporting-text-size: 12px,
+      container-color: white,
+      supporting-text-color: black,
+    )
+  );
+
+  .mat-mdc-tooltip-surface {
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.32) !important;
+    font-weight: 400;
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@onemrvapublic/design-system-theme",
+  "version": "0.0.0-semantically-released",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    ".": {
+      "sass": "./index.scss",
+      "types": "./index.d.ts",
+      "default": "./fesm2022/onemrvapublic-design-system-theme.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "module": "fesm2022/onemrvapublic-design-system-theme.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/palettes/_palette.scss

@@ -0,0 +1,188 @@
+$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,
+    10: #420007,
+    20: #6c000d,
+    25: #810010,
+    30: #970014,
+    35: #b00019,
+    40: #eb142a,
+    50: #f14d52,
+    60: #f87d7b,
+    70: #fca6a3,
+    80: #fca3a4,
+    90: #ffe3e0,
+    95: #fff0ee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+
+  tertiary: (
+    0: #000000,
+    10: #420007,
+    20: #6c000d,
+    25: #810010,
+    30: #970014,
+    35: #b00019,
+    40: #eb142a,
+    50: #f14d52,
+    60: #f87d7b,
+    70: #fca6a3,
+    80: #fca3a4,
+    90: #ffe3e0,
+    95: #fff0ee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #0e0e13,
+    6: #131319,
+    10: #1b1b21,
+    12: #1f1f25,
+    17: #2a2930,
+    20: #303036,
+    22: #34343b,
+    24: #39383f,
+    25: #3b3b41,
+    30: #47464d,
+    35: #525259,
+    40: #5e5e65,
+    50: #77767e,
+    60: #919097,
+    70: #acaab2,
+    80: #c8c5cd,
+    87: #dbd9e1,
+    90: #e4e1ea,
+    92: #e9e7ef,
+    94: #efecf5,
+    95: #f2eff8,
+    96: #f5f2fb,
+    98: #f6f5f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1d1a22,
+    20: #332f37,
+    25: #3e3a42,
+    30: #49454e,
+    35: #55515a,
+    40: #615c66,
+    50: #7b757f,
+    60: #958e99,
+    70: #b0a9b3,
+    80: #cbc4cf,
+    90: #f9f2fd,
+    // lighter tone
+    95: #fbf6fe,
+    98: #fdfbff,
+    99: #fefeff,
+    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,
+    // main tone
+    50: #6159ea,
+    60: #7b75ef,
+    70: #9a96f5,
+    80: #bab7f9,
+    90: #e0e0fc,
+    // 💡 lighter than previous #d0cefa
+    95: #eae9fe,
+    98: #f5f4ff,
+    99: #fbfaff,
+    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/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/utilities/_container.scss

@@ -0,0 +1,42 @@
+@use './media' as media;
+@use 'sass:map';
+
+@mixin theme($breakpoints) {
+  .onemrva-layout-container {
+    width: 100%;
+    padding-right: var(--spacer);
+    padding-left: var(--spacer);
+    margin-right: auto;
+    margin-left: auto;
+    box-sizing: border-box;
+
+    @include media.media($breakpoints, small) {
+      padding-right: var(--double-spacer);
+      padding-left: var(--double-spacer);
+    }
+    @include media.media($breakpoints, medium) {
+      padding-right: var(--triple-spacer);
+      padding-left: var(--triple-spacer);
+    }
+    @include media.media($breakpoints, large) {
+      padding-right: calc(6 * var(--spacer));
+      padding-left: calc(6 * var(--spacer));
+    }
+    @include media.media($breakpoints, xlarge) {
+      padding-right: calc(7 * var(--spacer));
+      padding-left: calc(7 * var(--spacer));
+    }
+    @include media.media($breakpoints, xxlarge) {
+      margin-right: auto;
+      margin-left: auto;
+      max-width: #{map.get(map.get($breakpoints, xxlarge), min) - 112}px;
+    }
+
+    //
+    // DO NOT UNCOMMENT
+    //
+    // @include media.media(xlarge) {
+    //    max-width: #{map.get(map.get($breakpoints, xlarge), min) - 16}px;
+    // }
+  }
+}

package/utilities/_fonts.scss

@@ -0,0 +1,158 @@
+@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);
+  }
+
+  @include mat.theme-overrides(
+    (
+      body-large: 400 1.125rem/1.625rem Source Sans Pro,
+      body-large-font: Source Sans Pro,
+      body-large-size: 1.125rem,
+      body-large-height: 1.625rem,
+      body-large-weight: 400,
+
+      body-medium: 400 1rem/1.625rem Source Sans Pro,
+      body-medium-font: Source Sans Pro,
+      body-medium-size: 1rem,
+      body-medium-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-height: 1.3125rem,
+      body-small-weight: 400,
+
+      display-small: 600 2rem/3.25rem Poppins,
+      display-small-font: Poppins,
+      display-small-size: 2rem,
+      display-small-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-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-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-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-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-height: 2.75rem,
+      headline-large-weight: 600,
+
+      label-large: 500 1rem/1.3125rem Poppins,
+      label-large-font: Poppins,
+      label-large-size: 1rem,
+      label-large-height: 1.3125rem,
+      label-large-weight: 500,
+
+      label-medium: 400 0.875rem/1.3125rem Poppins,
+      label-medium-font: Poppins,
+      label-medium-size: 0.875rem,
+      label-medium-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-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-height: 1.3125rem,
+      title-small-weight: 600,
+
+      title-medium: 600 1rem/1.75rem Poppins,
+      title-medium-font: Poppins,
+      title-medium-size: 1rem,
+      title-medium-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-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;
+
+ */