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

package/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 !important;
+      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/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/utilities/_palettes.scss

@@ -0,0 +1,119 @@
+@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),
+//    )
+//  );
+//}

package/utilities/_spacing.scss

@@ -0,0 +1,86 @@
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin padmarrules($name, $selector, $suffix, $value) {
+  .#{$selector}l#{$suffix},
+  .#{$selector}s#{$suffix} {
+    #{$name}-left: #{$value} !important;
+  }
+  .#{$selector}r#{$suffix},
+  .#{$selector}e#{$suffix} {
+    #{$name}-right: #{$value} !important;
+  }
+  .#{$selector}t#{$suffix} {
+    #{$name}-top: #{$value} !important;
+  }
+  .#{$selector}b#{$suffix} {
+    #{$name}-bottom: #{$value} !important;
+  }
+  .#{$selector}x#{$suffix} {
+    #{$name}-right: #{$value} !important;
+    #{$name}-left: #{$value} !important;
+  }
+  .#{$selector}y#{$suffix} {
+    #{$name}-top: #{$value} !important;
+    #{$name}-bottom: #{$value} !important;
+  }
+  .#{$selector}#{$suffix} {
+    #{$name}: #{$value} !important;
+  }
+}
+@mixin gaprules($suffix, $value) {
+  .g#{$suffix} {
+    gap: $value !important;
+  }
+  .gc#{$suffix} {
+    column-gap: $value !important;
+  }
+  .gr#{$suffix} {
+    row-gap: $value !important;
+  }
+}
+
+@mixin spacing() {
+  @each $spacer in variables.$spacers {
+    @include padmarrules(
+      $name: 'padding',
+      $selector: 'p',
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+    @include padmarrules(
+      $name: 'margin',
+      $selector: 'm',
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+
+    @include gaprules(
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+
+    @each $breakpoint in variables.$breakpoints {
+      //@media (min-width: list.nth($breakpoint, 2)) {
+      @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+        $sfx: #{list.nth($spacer, 1)}-#{list.nth($breakpoint, 1)};
+        @include padmarrules(
+          $name: 'padding',
+          $selector: 'p',
+          $suffix: $sfx,
+          $value: list.nth($spacer, 2)
+        );
+        @include padmarrules(
+          $name: 'margin',
+          $selector: 'm',
+          $suffix: $sfx,
+          $value: list.nth($spacer, 2)
+        );
+
+        @include gaprules($suffix: $sfx, $value: list.nth($spacer, 2));
+      }
+    }
+  }
+}

package/utilities/_tokens.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme() {
+  & {
+    --icon-size-xsmall: 0.75rem;
+    --icon-size-small: 1rem;
+    --icon-size-medium: 1.25rem;
+    --icon-size-large: 1.5rem;
+    --icon-size-xlarge: 3rem;
+    --icon-size-xxlarge: 4rem;
+
+    --layout-header-height: 90px;
+    --layout-content-padding-top: 106px;
+    --layout-footer-height: 30px;
+
+    --box-shadow: 0 2px 6px #00000026;
+
+    --border-radius: 16px;
+    --half-border-radius: 8px;
+    --small-border-radius: 4px;
+
+    --input-height: 46px;
+    --paginator-height: 37px;
+    --page-size-width: 80px;
+
+    --triple-spacer: 1.5rem;
+    --double-spacer: 1rem;
+    --spacer-and-half: 0.75rem;
+    --spacer: 0.5rem;
+    --half-spacer: 0.25rem;
+    --quarter-spacer: 0.125rem;
+
+    --text-font: Source Sans Pro, sans-serif;
+    --brand-font: Poppins, sans-serif;
+    --icon-font: Material Icons;
+    --button-border-radius: 500px;
+
+    --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+
+    --on-background-gradient: white;
+    --background-gradient: transparent
+      linear-gradient(90deg, #de2174 0%, #eb142a 100%) 0% 0% no-repeat
+      padding-box;
+
+    --toc-width: 280px;
+
+    --avatar-size: 3.5rem;
+    --avatar-font-size: 2.5rem;
+    --avatar-resize: 0.75rem;
+
+    .onemrva-mat-avatar--xsmall {
+      --avatar-size: 2rem;
+      --avatar-font-size: 0.75rem;
+      --avatar-resize: 0.25rem;
+    }
+    .onemrva-mat-avatar--small {
+      --avatar-size: 2.5rem;
+      --avatar-font-size: 1rem;
+      --avatar-resize: 0.5rem;
+    }
+    .onemrva-mat-avatar--large {
+      --avatar-size: 4.5rem;
+      --avatar-font-size: 2rem;
+      --avatar-resize: 1rem;
+    }
+    .onemrva-mat-avatar--xlarge {
+      --avatar-resize: 1.5rem;
+      --avatar-size: 8rem;
+      --avatar-font-size: 4rem;
+    }
+
+    &:not(.light-theme) {
+      @media (prefers-color-scheme: dark) {
+        // TODO : dark mode
+        --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+      }
+    }
+
+    &.dark-theme {
+      // TODO : dark mode
+      --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+    }
+  }
+}