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

package/overrides/_chips.scss

@@ -0,0 +1,42 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  @include mat.chips-overrides(
+    (
+      container-shape-radius: var(--button-border-radius),
+      outline-color: var(--mat-sys-primary),
+      elevated-container-color: var(--mat-sys-primary-container),
+      container-height: 38px,
+      label-text-color: var(--mat-sys-primary),
+      label-text-font: var(--mat-sys-label-large-font),
+      label-text-size: var(--mat-sys-label-large-size),
+      label-text-line-height: var(--mat-sys-label-large-height),
+    )
+  );
+  mat-chip-option,
+  mat-chip {
+    &.mat-accent {
+      background: var(--background-gradient);
+      @include mat.chips-overrides(
+        (
+          outline-color: var(--mat-sys-secondary),
+        )
+      );
+      .mat-mdc-chip-action-label {
+        color: var(--on-background-gradient);
+      }
+    }
+    &.mat-error {
+      background: var(--mat-sys-error-container);
+      @include mat.chips-overrides(
+        (
+          outline-color: var(--mat-sys-on-error-container),
+        )
+      );
+      .mat-mdc-chip-action-label {
+        color: var(--mat-sys-primary);
+      }
+    }
+  }
+}

package/overrides/_dialogs.scss

@@ -0,0 +1,130 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.dialog-overrides(
+    (
+      container-shape: var(--half-border-radius),
+      subhead-color: var(--mat-sys-primary),
+      subhead-font: var(--),
+    )
+  );
+
+  .close-dialog {
+    position: absolute;
+    top: var(--double-spacer);
+    right: var(--double-spacer);
+    mat-icon {
+      font-size: 1.5rem;
+    }
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  //
+  //.mdc-dialog__title::before {
+  //  height: auto;
+  //}
+  //
+  //.mat-mdc-dialog-container {
+  //  border-radius: 8px;
+  //
+  //  .mat-mdc-dialog-surface {
+  //    padding: 0;
+  //  }
+  //
+  //  .mat-toolbar.mat-accent {
+  //    background: variables.$onemrva-accent-gradient;
+  //    color: white;
+  //  }
+  //
+  //  .mat-mdc-dialog-title {
+  //    //styleName: Title/H4/Default;
+  //    font-family: mat.get-theme-typography($theme, 'headline-1', font-family);
+  //    font-size: 18px;
+  //    font-weight: 700;
+  //    letter-spacing: 0;
+  //    text-align: left;
+  //    line-height: 26px;
+  //    padding: 3 * $spacer 6 * $spacer $spacer 3 * $spacer;
+  //    button.close-dialog {
+  //      margin-top: -12px;
+  //    }
+  //  }
+  //
+  //  .mat-mdc-dialog-content {
+  //    padding: $spacer 3 * $spacer $spacer;
+  //    color: µ.grayscale($theme, 900);
+  //  }
+  //
+  //  .mat-mdc-dialog-actions {
+  //    padding: $spacer 3 * $spacer 3 * $spacer;
+  //    align-items: end;
+  //    justify-content: end;
+  //  }
+  //}
+  //.xlarge {
+  //  .mat-mdc-dialog-container {
+  //    width: 996px;
+  //  }
+  //}
+  //.large {
+  //  .mat-mdc-dialog-container {
+  //    width: 812px;
+  //  }
+  //}
+  //.medium {
+  //  .mat-mdc-dialog-container {
+  //    width: 628px;
+  //  }
+  //}
+  //.small {
+  //  .mat-mdc-dialog-container {
+  //    width: 444px;
+  //  }
+  //}
+  //.mat-success,
+  //.mat-error,
+  //.mat-warn {
+  //  .mat-mdc-dialog-title {
+  //    &:before {
+  //      display: inline;
+  //      //noinspection CssNoGenericFontName
+  //      font-family: 'Material Icons';
+  //      font-variation-settings:
+  //        'FILL' 1,
+  //        'wght' 700,
+  //        'GRAD' 0,
+  //        'opsz' 20;
+  //      font-size: 24px;
+  //      top: 5px;
+  //      margin: 0 8px 0 0;
+  //      position: relative;
+  //    }
+  //  }
+  //}
+  //.mat-error {
+  //  .mat-mdc-dialog-title {
+  //    color: µ.error($theme);
+  //    &:before {
+  //      content: '\e000';
+  //    }
+  //  }
+  //}
+  //.mat-success {
+  //  .mat-mdc-dialog-title {
+  //    color: µ.success($theme, 600);
+  //    &:before {
+  //      content: '\e86c';
+  //    }
+  //  }
+  //}
+  //.mat-warn {
+  //  .mat-mdc-dialog-title {
+  //    color: µ.warn($theme, 600);
+  //    &:before {
+  //      content: '\e002';
+  //    }
+  //  }
+  //}
+}

package/overrides/_divider.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.divider-overrides(
+    (
+      color: var(--mat-sys-outline-variant),
+    )
+  );
+}

package/overrides/_drag-and-drop.scss

@@ -0,0 +1,74 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  .cdk-drag-placeholder {
+    background: var(--mat-sys-primary-container);
+    border: 2px dotted var(--mat-sys-primary);
+    min-height: 3.5rem;
+    border-radius: var(--half-border-radius);
+    margin-bottom: var(--spacer);
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  .cdk-drag-preview {
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background: var(--mat-sys-primary-container);
+  }
+  .cdk-drop-list-dragging {
+    cursor: grabbing;
+    .cdk-drag:not(.mat-mdc-chip) {
+      cursor: inherit !important;
+    }
+  }
+
+  .cdk-drag:not(.mat-mdc-chip):not(tr):not(mat-row) {
+    position: relative;
+    display: flex;
+    cursor: grab;
+    //  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+    background-color: var(--mat-sys-surface-container);
+    padding: var(--double-spacer) var(--double-spacer) var(--double-spacer)
+      calc(var(--spacer) * 7);
+    border-radius: var(--half-border-radius);
+    margin-bottom: var(--spacer);
+
+    &:before {
+      border-radius: var(--half-border-radius) 0 0 var(--half-border-radius);
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      font-family: var(--icon-font);
+      content: '\e945';
+      align-items: center;
+      display: inline-flex;
+      padding: var(--double-spacer) var(--spacer);
+      //padding: 15px 10px 15px 14px; // THe icon is slightly narrower than in the DS so it's shifted to the left so as to be centered
+      color: var(--mat-sys-primary);
+      background-color: var(--mat-sys-surface-container);
+      width: 1.5rem;
+      font-size: 2rem;
+    }
+  }
+
+  trn mat-row {
+    &.cdk-drag-preview {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      //padding: 0 0 var(--double-spacer) 0;
+      overflow: hidden;
+      border-radius: var(--half-border-radius);
+    }
+    .cdk-drag-preview {
+      height: 2.8rem;
+    }
+    &.cdk-drag-placeholder {
+      opacity: 0.2;
+    }
+  }
+}

package/overrides/_expansion.scss

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.expansion-overrides(
+    (
+      container-shape: none,
+      header-text-font: var(--mat-sys-title-small-font),
+      header-text-size: var(--mat-sys-title-small-size),
+      container-text-size: var(--mat-sys-title-small-size),
+      header-hover-state-layer-color: transparent,
+    )
+  );
+
+  .mat-expansion-panel {
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
+    .mat-expansion-panel-header-title {
+      align-items: center;
+      display: flex;
+      gap: var(--spacer);
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 0;
+      }
+      &:after {
+        content: '';
+        width: 130px;
+        height: 1px;
+        background: var(--mat-sys-outline-variant);
+        flex: 1000000 0 10px;
+      }
+    }
+  }
+}

package/overrides/_fab.scss

@@ -0,0 +1,45 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.fab-overrides(
+    (
+      container-shape: var(--button-border-radius),
+      small-container-shape: var(--button-border-radius),
+    )
+  );
+  button {
+    &.mat-mdc-fab-base {
+      &.mat-accent {
+        background: var(--background-gradient);
+        color: var(--on-background-gradient);
+      }
+      &.mat-primary,
+      &.mat-secondary,
+      &.mat-tertiary,
+      &.mat-success,
+      &.mat-info,
+      &.mat-error,
+      &.mat-warn {
+        @include mat.fab-overrides(
+          (
+            container-color: var(--mat-sys-primary),
+            small-container-color: var(--mat-sys-primary),
+            foreground-color: var(--mat-sys-on-primary),
+            small-foreground-color: var(--mat-sys-on-primary),
+          )
+        );
+      }
+      &.mat-neutral,
+      &.mat-grayscale {
+        @include mat.fab-overrides(
+          (
+            container-color: var(--mat-sys-primary-container),
+            small-container-color: var(--mat-sys-primary-container),
+            foreground-color: var(--mat-sys-on-primary-container),
+            small-foreground-color: var(--mat-sys-on-primary-container),
+          )
+        );
+      }
+    }
+  }
+}

package/overrides/_form-field.scss

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.form-field-overrides(
+    (
+      outlined-label-text-color: var(--mat-sys-on-surface),
+      outlined-focus-label-text-color: var(--mat-sys-on-surface),
+      outlined-hover-label-text-color: var(--mat-sys-on-surface),
+      container-height: var(--input-height),
+      container-vertical-padding: var(--spacer-and-half),
+      outlined-label-text-weight: bold,
+      outlined-outline-color: var(--mat-sys-outline-variant),
+      outlined-focus-outline-color: var(--mat-sys-on-surface),
+      outlined-hover-outline-color: var(--mat-sys-on-surface),
+      outlined-outline-width: 1px,
+      outlined-focus-outline-width: 2px,
+    )
+  );
+
+  mat-form-field {
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+      .mdc-notched-outline--upgraded {
+        .mdc-floating-label--float-above {
+          --mat-form-field-container-height: 44px;
+          --mat-mdc-form-field-floating-label-scale: 0.75;
+          --mat-mdc-form-field-label-transform: translateY(
+              calc(
+                calc(
+                    6.75px + var(--mat-form-field-container-height, 56px) / 2
+                  ) *
+                  -1.1
+              )
+            )
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+        }
+      }
+    }
+  }
+}

package/overrides/_icon-button.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+
+@mixin override() {
+  button {
+    &.mdc-icon-button {
+      &.small {
+        --mdc-icon-button-state-layer-size: calc(var(--icon-size-small) * 1.5);
+        --mdc-icon-button-icon-size: var(--icon-size-small);
+        mat-icon {
+          height: var(--icon-size-small);
+          font-size: var(--icon-size-small);
+          width: var(--icon-size-small);
+        }
+      }
+    }
+  }
+}

package/overrides/_icon.scss

@@ -0,0 +1,97 @@
+@mixin override() {
+  mat-icon {
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 300,
+      'GRAD' 0,
+      'opsz' 24;
+
+    &.xsmall {
+      font-size: var(--icon-size-xsmall);
+      line-height: var(--icon-size-xsmall);
+      height: var(--icon-size-xsmall);
+      width: var(--icon-size-xsmall);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 12;
+    }
+
+    &.small {
+      font-size: var(--icon-size-small);
+      line-height: var(--icon-size-small);
+      height: var(--icon-size-small);
+      width: var(--icon-size-small);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 16;
+    }
+
+    &.medium {
+      height: var(--icon-size-medium);
+      width: var(--icon-size-medium);
+      line-height: var(--icon-size-medium);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 20;
+    }
+
+    &.large {
+      font-size: var(--icon-size-large);
+      line-height: var(--icon-size-large);
+      height: var(--icon-size-large);
+      width: var(--icon-size-large);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24;
+    }
+
+    &.xlarge {
+      font-size: var(--icon-size-xlarge);
+      line-height: var(--icon-size-xlarge);
+      height: var(--icon-size-xlarge);
+      width: var(--icon-size-xlarge);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 300,
+        'GRAD' 0,
+        'opsz' 62;
+    }
+
+    &.xxlarge {
+      font-size: var(--icon-size-xxlarge);
+      line-height: var(--icon-size-xxlarge);
+      height: var(--icon-size-xxlarge);
+      width: var(--icon-size-xxlarge);
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 300,
+        'GRAD' 0,
+        'opsz' 40;
+    }
+
+    &.mat-primary,
+    &.mat-secondary,
+    &.mat-tertiary,
+    &.mat-success,
+    &.mat-info,
+    &.mat-error,
+    &.mat-warn,
+    &.mat-neutral,
+    &.mat-grayscale,
+    &.mat-accent {
+      color: var(--mat-sys-primary);
+    }
+
+    &.filled {
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+}