@rlucan/ui 14.2.1

package/ui.scss

@@ -0,0 +1,911 @@
+@use 'sass:math';
+@use '@angular/material' as mat;
+
+@import "scss/ui-defaults";
+
+@function str-split($string, $separator) {
+  $split-arr: ();
+  $index : str-index($string, $separator);
+  @while $index != null {
+    $item: str-slice($string, 1, $index - 1);
+    $split-arr: append($split-arr, $item);
+    $string: str-slice($string, $index + 1);
+    $index : str-index($string, $separator);
+  }
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+@function uiGetColor($map, $key) {
+  @each $k in str-split($key, ".") {
+    @if $map {
+      $map:map-get($map, $k);
+    }
+  }
+  @return $map;
+}
+
+@function deep-map-merge($parent-map, $child-map) {
+  $result: $parent-map;
+  @each $key, $value in $child-map {
+    @if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+      $result: map-merge($result, ($key: $value));
+    }
+    @else {
+      $result: map-merge($result, ($key: deep-map-merge(map-get($result, $key), $value)));
+    }
+  }
+  @return $result;
+}
+
+@mixin ui-dark($uiColors, $uiGeometry, /*$uiTypography, */$matTheme) {
+  @include ui(deep-map-merge(uiDefaultDarkColors($matTheme), $uiColors), map-merge($uiDefaultGeometry, $uiGeometry)/*, map-merge($uiDefaultTypography, $uiTypography)*/);
+}
+
+@mixin ui-light($uiColors, $uiGeometry, /*$uiTypography, */$matTheme) {
+  @include ui(deep-map-merge(uiDefaultLightColors($matTheme), $uiColors), map-merge($uiDefaultGeometry, $uiGeometry)/*, map-merge($uiDefaultTypography, $uiTypography)*/);
+}
+
+@mixin ui($colors, $geometry/*, $typography*/) {
+
+  .mdc-data-table__cell {
+    color: uiGetColor($colors, 'table.row.cell.color');
+  }
+
+  .mdc-data-table__header-cell {
+    color: uiGetColor($colors, 'table.header.cell.color');
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background-color: uiGetColor($colors, 'dialog.backdrop.background-color');
+  }
+
+  .mat-mdc-dialog-container {
+    .mat-mdc-dialog-surface {
+      background-color: uiGetColor($colors, 'dialog.background-color') !important;
+    }
+    .mdc-dialog__title {
+      color: uiGetColor($colors, 'dialog.title.color') !important;
+    }
+  }
+
+  ui-select .mat-mdc-select-placeholder, ui-select .mat-mdc-select-arrow, ui-select .mat-mdc-select-value {
+    color: uiGetColor($colors, "input.color");
+    //&:disabled {
+    //  color: uiGetColor($colors, "input.disabled.color");
+    //}
+    &::placeholder {
+      color: uiGetColor($colors, "input.placeholder.color");
+    }
+  }
+
+  ui-select .mat-mdc-select-disabled {
+    .mat-mdc-select-value, .mat-mdc-select-arrow {
+      color: uiGetColor($colors, "input.disabled.color");
+    }
+  }
+
+  ui-date input, ui-input input, ui-text-area textarea, ui-select .mat-mdc-select-trigger, ui-file-uploader .files-container {
+    background-color: uiGetColor($colors, "input.background-color");
+    color: uiGetColor($colors, "input.color");
+    border-color: uiGetColor($colors, "input.border-color") !important;
+
+    &:focus {
+      border-color: uiGetColor($colors, "input.focus.border-color") !important;
+    }
+
+    &:disabled {
+      background-color: uiGetColor($colors, "input.disabled.background-color") !important;
+      color: uiGetColor($colors, "input.disabled.color");
+    }
+    &::placeholder {
+      color: uiGetColor($colors, "input.placeholder.color");
+    }
+  }
+
+  ui-base-layout {
+    .label {
+      color: uiGetColor($colors, "input.label.color");
+      font-weight: uiGetColor($colors, "input.label.font-weight");
+      .required {
+        color: uiGetColor($colors, "input.label.required.color") !important;
+      }
+    }
+    .counter {
+      color: uiGetColor($colors, "input.label.counter.color");
+    }
+  }
+
+  ui-checkbox {
+    .label {
+      color: uiGetColor($colors, "checkbox.label.color");
+      font-weight: uiGetColor($colors, "checkbox.label.font-weight");
+    }
+  }
+
+  ui-input, ui-date {
+    .control-container {
+      [slot=suffix], [slot=prefix] {
+        color: uiGetColor($colors, "input.prefix-suffix.color");
+        &:hover {
+          color: uiGetColor($colors, "input.prefix-suffix.hover.color");
+        }
+      }
+    }
+  }
+
+  ui-base-layout.invalid {
+    input, textarea, .mat-select-trigger, .mat-mdc-select-trigger {
+      color: uiGetColor($colors, "input.invalid.color");
+      background-color: uiGetColor($colors, "input.invalid.background-color");
+      border-color: uiGetColor($colors, "input.invalid.border-color") !important;
+      &::placeholder {
+        color: uiGetColor($colors, "input.invalid.placeholder.color");
+      }
+    }
+
+    .label {
+      .text {
+        color: uiGetColor($colors, "input.invalid.label.color");
+      }
+    }
+
+    .hint-container, .mat-select-value, .mat-select-arrow, .mat-mdc-select-value, .mat-mdc-select-arrow {
+      color: uiGetColor($colors, "input.invalid.hint.color");
+    }
+  }
+
+  ui-currency ui-base-layout.invalid > .control-container {
+    border-color: uiGetColor($colors, "input.invalid.border-color");
+    background-color: uiGetColor($colors, "input.invalid.background-color");
+    input, .mat-select-trigger, .mat-mdc-select-trigger {
+      background-color: transparent;
+    }
+  }
+
+  ui-currency > ui-base-layout > .control-container {
+    border-color:  uiGetColor($colors, "input.border-color");
+    background-color: uiGetColor($colors, "input.background-color");
+  }
+
+  ui-currency.focus > ui-base-layout > .control-container {
+    border-color: uiGetColor($colors, "input.focus.border-color");
+  }
+
+  ui-button, ui-action-button {
+    &.disabled {
+      button {
+        opacity: 0.5;
+        cursor: default !important;
+      }
+    }
+    &.basic {
+      &.primary {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.basic.primary.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.basic.primary.color');
+          background-color: uiGetColor($colors, 'button.basic.primary.background-color');
+        }
+      }
+      &.accent {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.basic.accent.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.basic.accent.color');
+          background-color: uiGetColor($colors, 'button.basic.accent.background-color');
+        }
+      }
+      &.warn {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.basic.warn.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.basic.warn.color');
+          background-color: uiGetColor($colors, 'button.basic.warn.background-color');
+        }
+      }
+    }
+    &.flat {
+      &.primary {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.flat.primary.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.flat.primary.color');
+          background-color: uiGetColor($colors, 'button.flat.primary.background-color');
+        }
+      }
+      &.accent {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.flat.accent.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.flat.accent.color');
+          background-color: uiGetColor($colors, 'button.flat.accent.background-color');
+        }
+      }
+      &.warn {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.flat.warn.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.flat.warn.color');
+          background-color: uiGetColor($colors, 'button.flat.warn.background-color');
+        }
+      }
+    }
+    &.stroked {
+      &.primary {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.stroked.primary.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.stroked.primary.color');
+          background-color: uiGetColor($colors, 'button.stroked.primary.background-color');
+          border-color: uiGetColor($colors, 'button.stroked.primary.border-color');
+        }
+      }
+      &.accent {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.stroked.accent.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.stroked.accent.color');
+          background-color: uiGetColor($colors, 'button.stroked.accent.background-color');
+          border-color: uiGetColor($colors, 'button.stroked.accent.border-color');
+        }
+      }
+      &.warn {
+        &:not(.disabled) {
+          button:hover {
+            background-color: uiGetColor($colors, 'button.stroked.warn.hover.background-color')
+          }
+        }
+        button {
+          color: uiGetColor($colors, 'button.stroked.warn.color');
+          background-color: uiGetColor($colors, 'button.stroked.warn.background-color');
+          border-color: uiGetColor($colors, 'button.stroked.warn.border-color');
+        }
+      }
+    }
+  }
+
+  .ui-user-input, .options-box {
+    background-color: uiGetColor($colors, 'autocomplete.background-color');
+    color: uiGetColor($colors, 'autocomplete.color');
+    .users, .options {
+      .user-container, .user-group, .option-container {
+        &:hover {
+          background-color: uiGetColor($colors, 'autocomplete.options.hover.background-color') !important;
+        }
+        mat-icon:hover {
+          color: uiGetColor($colors, 'autocomplete.options.hover.mat-icon.color');
+        }
+      }
+      .user-container, .option-container {
+        &.selected {
+          background-color: uiGetColor($colors, 'autocomplete.options.selected.background-color');
+          color: uiGetColor($colors, 'autocomplete.options.selected.color');
+          mat-icon {
+            display: block !important;
+          }
+          //.user.unselectable, .option-option.unselectable {
+          //  color: uiGetColor($colors, 'autocomplete.options.selected.unselectable.color');
+          //}
+        }
+        //.user, .option-option {
+        //  &.unselectable {
+        //    color: uiGetColor($colors, 'autocomplete.options.unselectable.color');
+        //  }
+        //}
+      }
+    }
+  }
+
+  ui-expander {
+    mat-icon {
+      color: uiGetColor($colors, 'expander.color')
+    }
+  }
+
+  mat-pseudo-checkbox {
+    border-color: uiGetColor($colors, 'checkbox.primary.color') !important;
+    &.mat-pseudo-checkbox-checked {
+      border-color: transparent !important;
+      background-color: uiGetColor($colors, 'checkbox.primary.icon.checked-color') !important;
+      &.mat-pseudo-checkbox-full::after {
+        color: uiGetColor($colors, 'checkbox.primary.check.color');
+      }
+    }
+    &.mat-pseudo-checkbox-minimal {
+      &::after {
+        color: uiGetColor($colors, 'checkbox.primary.icon.checked-color') !important;
+      }
+      background-color: transparent !important;
+    }
+  }
+
+  .mdc-list-item.mdc-list-item--selected .mdc-list-item__primary-text {
+    color: uiGetColor($colors, 'checkbox.primary.label.checked-color') !important;
+  }
+
+  //mat-checkbox {
+  //  &.mat-primary {
+  //    .mat-checkbox-frame {
+  //      border-color: uiGetColor($colors, 'checkbox.primary.color');
+  //    }
+  //
+  //    &.mat-checkbox-checked .mat-checkbox-background {
+  //      background-color: uiGetColor($colors, 'checkbox.primary.checked.color') !important;
+  //    }
+  //  }
+  //  &.mat-accent {
+  //    .mat-checkbox-frame {
+  //      border-color: uiGetColor($colors, 'checkbox.accent.color');
+  //    }
+  //
+  //    &.mat-checkbox-checked .mat-checkbox-background {
+  //      background-color: uiGetColor($colors, 'checkbox.accent.checked.color') !important;
+  //    }
+  //  }
+  //  &.mat-warn {
+  //    .mat-checkbox-frame {
+  //      border-color: uiGetColor($colors, 'checkbox.warn.color');
+  //    }
+  //
+  //    &.mat-checkbox-checked .mat-checkbox-background {
+  //      background-color: uiGetColor($colors, 'checkbox.warn.checked.color') !important;
+  //    }
+  //  }
+  //  &.mat-mdc-checkbox .mdc-checkbox { // ngmat@15
+  //    margin: -0.5em;
+  //  }
+  //}
+
+  .mat-mdc-checkbox {
+    &.mat-primary {
+      label {
+        color: uiGetColor($colors, 'checkbox.primary.label.color');
+      }
+      &:not(.mat-mdc-checkbox-checked) {
+        .mdc-checkbox__background {
+          border-color: uiGetColor($colors, 'checkbox.primary.icon.color') !important;
+        }
+      }
+      .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
+        border-color: uiGetColor($colors, 'checkbox.primary.icon.color') !important;
+      }
+      &.mat-mdc-checkbox-checked {
+        label {
+          color: uiGetColor($colors, 'checkbox.primary.label.checked-color');
+        }
+      }
+    }
+    &.mat-accent {
+      label {
+        color: uiGetColor($colors, 'checkbox.accent.label.color');
+      }
+      &:not(.mat-mdc-checkbox-checked) {
+        .mdc-checkbox__background {
+          border-color: uiGetColor($colors, 'checkbox.accent.icon.color') !important;
+        }
+      }
+      &.mat-mdc-checkbox-checked {
+        label {
+          color: uiGetColor($colors, 'checkbox.accent.label.checked-color');
+        }
+      }
+    }
+    &.mat-warn {
+      label {
+        color: uiGetColor($colors, 'checkbox.warn.label.color');
+      }
+      &:not(.mat-mdc-checkbox-checked) {
+        .mdc-checkbox__background {
+          border-color: uiGetColor($colors, 'checkbox.warn.icon.color') !important;
+        }
+      }
+      &.mat-mdc-checkbox-checked {
+        label {
+          color: uiGetColor($colors, 'checkbox.warn.label.checked-color');
+        }
+      }
+    }
+    &.mat-mdc-checkbox-checked {
+      &.mat-primary {
+        .mdc-checkbox__background {
+          background-color: uiGetColor($colors, 'checkbox.primary.icon.checked-color') !important;
+        }
+      }
+      &.mat-accent {
+        .mdc-checkbox__background {
+          background-color: uiGetColor($colors, 'checkbox.accent.icon.checked-color') !important;
+        }
+      }
+      &.mat-warn {
+        .mdc-checkbox__background {
+          background-color: uiGetColor($colors, 'checkbox.warn.icon.checked-color') !important;
+        }
+      }
+    }
+  }
+
+
+  .mat-mdc-radio-button {
+    &.mat-primary {
+      &.mat-mdc-radio-checked {
+        .mdc-radio__outer-circle, .mdc-radio__inner-circle {
+          border-color: uiGetColor($colors, 'checkbox.primary.icon.checked-color') !important;
+        }
+        .mdc-form-field {
+          color: uiGetColor($colors, 'checkbox.primary.label.checked-color');
+        }
+        .mdc-radio--disabled + label {
+          color: uiGetColor($colors, 'checkbox.primary.label.checked-color') !important;
+        }
+      }
+      .mdc-radio__outer-circle {
+        border-color: uiGetColor($colors, 'checkbox.primary.icon.color') !important;
+      }
+      .mdc-form-field {
+        color: uiGetColor($colors, 'checkbox.primary.label.color');
+      }
+      .mdc-radio--disabled + label {
+        color: uiGetColor($colors, 'checkbox.primary.label.color') !important;
+      }
+    }
+    &.mat-accent {
+      &.mat-mdc-radio-checked {
+        .mdc-radio__outer-circle, .mdc-radio__inner-circle {
+          border-color: uiGetColor($colors, 'checkbox.accent.icon.checked-color') !important;
+        }
+        .mdc-form-field {
+          color: uiGetColor($colors, 'checkbox.accent.label.checked-color');
+        }
+        .mdc-radio--disabled + label {
+          color: uiGetColor($colors, 'checkbox.accent.label.checked-color') !important;
+        }
+      }
+      .mdc-radio__outer-circle {
+        border-color: uiGetColor($colors, 'checkbox.accent.icon.color') !important;
+      }
+      .mdc-form-field {
+        color: uiGetColor($colors, 'checkbox.accent.label.color');
+      }
+      .mdc-radio--disabled + label {
+        color: uiGetColor($colors, 'checkbox.accent.label.color') !important;
+      }
+    }
+    &.mat-warn {
+      &.mat-mdc-radio-checked {
+        .mdc-radio__outer-circle, .mdc-radio__inner-circle {
+          border-color: uiGetColor($colors, 'checkbox.warn.icon.checked-color') !important;
+        }
+        .mdc-form-field {
+          color: uiGetColor($colors, 'checkbox.warn.label.checked-color');
+        }
+        .mdc-radio--disabled + label {
+          color: uiGetColor($colors, 'checkbox.warn.label.checked-color') !important;
+        }
+      }
+      .mdc-radio__outer-circle {
+        border-color: uiGetColor($colors, 'checkbox.warn.icon.color') !important;
+      }
+      .mdc-form-field {
+        color: uiGetColor($colors, 'checkbox.warn.label.color');
+      }
+      .mdc-radio--disabled + label {
+        color: uiGetColor($colors, 'checkbox.warn.label.color') !important;
+      }
+    }
+  }
+
+  ui-file-uploader {
+    .label {
+      color: uiGetColor($colors, "input.label.color");
+      .required {
+        color: uiGetColor($colors, "input.label.required.color") !important;
+      }
+    }
+    .file-menu {
+      color: uiGetColor($colors, 'file-uploader.menu.trigger.color');
+      background-color: uiGetColor($colors, 'file-uploader.menu.trigger.background-color');
+    }
+    .file-menu-container {
+      background-color: uiGetColor($colors, 'file-uploader.menu.background-color');
+      color: uiGetColor($colors, 'file-uploader.menu.color');
+
+      .menu-item {
+        &:hover {
+          background-color: uiGetColor($colors, 'file-uploader.menu.item.hover.background-color');
+        }
+      }
+    }
+    .crop-preview, .crop-menu {
+      background-color: uiGetColor($colors, 'file-uploader.preview.background-color');
+      border-color: uiGetColor($colors, 'file-uploader.preview.border-color') !important;
+    }
+    .crop-menu mat-icon {
+      color: uiGetColor($colors, 'file-uploader.preview.icon.color');
+      &:hover {
+        background-color: uiGetColor($colors, 'file-uploader.preview.icon.hover.background-color') !important;
+      }
+    }
+  }
+
+  ui-action-button {
+    &.with-primary {
+      &.stroked {
+        .mat-icon-container {
+          border-color: uiGetColor($colors, 'button.stroked.primary.border-color') !important;
+        }
+        button:hover:not(.disabled) {
+          background-color: transparent;
+          .hover-container:hover, .mat-icon-container:hover {
+            background-color: uiGetColor($colors, 'button.stroked.warn.hover.background-color');
+          }
+        }
+      }
+    }
+  }
+
+  ui-action-icon {
+    &.primary {
+      color: uiGetColor($colors, 'actionicon.primary.color');
+      &:hover {
+        &:not(&.disabled) {
+          color: uiGetColor($colors, 'actionicon.primary.hover.color');
+        }
+      }
+      &.disabled {
+        color: uiGetColor($colors, 'actionicon.primary.disabled.color');
+      }
+    }
+    &.accent {
+      color: uiGetColor($colors, 'actionicon.accent.color');
+      &:hover {
+        &:not(&.disabled) {
+          color: uiGetColor($colors, 'actionicon.accent.hover.color');
+        }
+      }
+      &.disabled {
+        color: uiGetColor($colors, 'actionicon.accent.disabled.color');
+      }
+    }
+    &.warn {
+      color: uiGetColor($colors, 'actionicon.warn.color');
+      &:hover {
+        &:not(&.disabled) {
+          color: uiGetColor($colors, 'actionicon.warn.hover.color');
+        }
+      }
+      &.disabled {
+        color: uiGetColor($colors, 'actionicon.warn.disabled.color');
+      }
+    }
+  }
+
+  mat-snack-bar-container { // ngmat@15
+    &.success {
+      .mdc-snackbar__surface {
+        background-color: uiGetColor($colors, 'toast.success.background-color');
+        color: uiGetColor($colors, 'toast.success.color');
+      }
+    }
+    &.warning {
+      .mdc-snackbar__surface {
+        background-color: uiGetColor($colors, 'toast.warning.background-color');
+        color: uiGetColor($colors, 'toast.warning.color');
+      }
+    }
+    &.fail {
+      .mdc-snackbar__surface {
+        background-color: uiGetColor($colors, 'toast.fail.background-color') !important;
+        color: uiGetColor($colors, 'toast.fail.color') !important;
+      }
+    }
+    &.info {
+      .mdc-snackbar__surface {
+        background-color: uiGetColor($colors, 'toast.info.background-color');
+        color: uiGetColor($colors, 'toast.info.color');
+      }
+    }
+  }
+  snack-bar-container {
+    &.success {
+      background-color: uiGetColor($colors, 'toast.success.background-color');
+      color: uiGetColor($colors, 'toast.success.color');
+    }
+    &.warning {
+      background-color: uiGetColor($colors, 'toast.warning.background-color');
+      color: uiGetColor($colors, 'toast.warning.color');
+    }
+    &.fail {
+      background-color: uiGetColor($colors, 'toast.fail.background-color');
+      color: uiGetColor($colors, 'toast.fail.color');
+    }
+    &.info {
+      background-color: uiGetColor($colors, 'toast.info.background-color');
+      color: uiGetColor($colors, 'toast.info.color');
+    }
+  }
+
+  mat-dialog-container {
+    [mat-dialog-title] {
+      border-bottom-color: uiGetColor($colors, 'dialog.divider.border-color') !important;
+    }
+  }
+
+  [mat-dialog-actions] {
+    border-top-color: uiGetColor($colors, 'dialog.divider.border-color') !important;
+    .message {
+      &.error {
+        color: uiGetColor($colors, 'dialog.message.error.color');
+        background-color: uiGetColor($colors, 'dialog.message.error.background-color');
+      }
+    }
+  }
+
+  //ui-remove {
+  //  &:not(.disabled) {
+  //    color: uiColor($ui, remove, color, $theme)
+  //  }
+  //  &.disabled {
+  //    color: uiColor($ui, remove, disabled-color, $theme)
+  //  }
+  //  mat-icon:hover {
+  //    color: uiColor($ui, remove, hover-color, $theme)
+  //  }
+  //}
+  //
+
+  //
+  .invalid {
+    color: uiGetColor($colors, "input.invalid.color");
+  }
+
+  /********************************* geometry ****************************/
+  $control-radius: map-get($geometry, control-radius);
+
+  ui-input input, ui-date input, ui-text-area textarea, ui-file-uploader .files-container, ui-select .mat-select-trigger, ui-select .mat-mdc-select-trigger, ui-button button {
+    border-width: map-get($geometry, input-border-width);
+    padding: map-get($geometry, control-padding);
+  }
+
+  ui-currency input {
+    border-width: 0 !important;
+  }
+
+  ui-currency > ui-base-layout > .control-container {
+    border-width: map-get($geometry, input-border-width);
+    border-radius: $control-radius;
+  }
+
+  ui-currency .control-container, ui-file-uploader {
+    border-radius: $control-radius;
+  }
+
+  ui-button, ui-action-button {
+    button {
+      border-radius: $control-radius;
+      padding: map-get($geometry, control-padding);
+
+      mat-progress-bar {
+        left: math.div($control-radius, 2);
+        width: calc(100% - 2 * #{math.div($control-radius, 2)});
+        background-color: white;
+      }
+    }
+  }
+
+  ui-input, ui-date, ui-text-area/*, ui-file-uploader*/ {
+    input, textarea/*, .file-container*/ {
+      border-radius: $control-radius;
+    }
+  }
+
+  ui-select .mat-select-trigger, ui-select .mat-mdc-select-trigger {
+    border-radius: $control-radius;
+  }
+
+  .mat-mdc-select-panel .mdc-list-item__primary-text {
+    color: uiGetColor($colors, "select.option.color");
+  }
+
+  .mat-mdc-select-panel .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after {
+    color: uiGetColor($colors, "select.option.color");
+  }
+
+  /********************************* typography ****************************/
+  ui-button, ui-action-button {
+    button {
+      font-weight: uiGetColor($colors, "button.font-weight"); /*map-get($typography, button-font-weight) !important;*/
+    }
+  }
+}
+
+
+ui-button, ui-action-button, ui-input, ui-date, ui-text-area, ui-select, ui-radio-group, ui-checkbox, ui-currency, .mat-mdc-radio-button, .mat-mdc-checkbox {
+  &.large {
+    font-size: 1.5em;
+    .mat-mdc-select-arrow-wrapper {
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+    }
+  }
+
+  &.larger {
+    font-size: 1.25em;
+    .mat-mdc-select-arrow-wrapper {
+      padding-top: 0.45em;
+      padding-bottom: 0.475em;
+    }
+  }
+
+  &.normal {
+    font-size: 1em;
+    .mat-mdc-select-arrow-wrapper {
+      padding-top: 0.4em;
+      padding-bottom: 0.45em;
+    }
+  }
+
+  &.smaller {
+    font-size: 0.9em;
+    .mat-mdc-select-arrow-wrapper {
+      padding-top: 0.44em;
+      padding-bottom: 0.45em;
+    }
+  }
+
+  &.small {
+    font-size: 0.75em;
+    .mat-mdc-select-arrow-wrapper {
+      padding-top: 0.34em;
+      padding-bottom: 0.4em;
+    }
+  }
+
+}
+
+.mat-mdc-checkbox {
+  --mdc-checkbox-state-layer-size: 2.5em;
+  .mdc-checkbox {
+    width: calc(2.5em / 2);
+    height: calc(2.5em / 2);
+    flex: 0 0 calc(2.5em / 2);
+  }
+  .mdc-checkbox__background {
+    height: calc(2.5em / 2);
+    width: calc(2.5em / 2);
+    &::before {
+      left: calc(-2.5em / 4) !important;
+      top: calc(-2.5em / 4) !important;
+    }
+  }
+  .mdc-checkbox__native-control {
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.mat-mdc-radio-button {
+  @mixin sizes($basesize) {
+    --mdc-radio-state-layer-size: #{$basesize};
+    .mdc-radio {
+      width: #{calc($basesize / 2)};
+      height: #{calc($basesize / 2)};
+    }
+    .mdc-radio__background {
+      height: #{calc($basesize / 2)};
+      width: #{calc($basesize / 2)};
+      &::before {
+        left: -#{calc($basesize / 4)} !important;
+        top: -#{calc($basesize / 4)} !important;
+      }
+    }
+    .mdc-radio__outer-circle {
+      height: #{calc($basesize / 2)};
+      width: #{calc($basesize / 2)};
+      top: 0;
+      left: 0;
+    }
+    .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle {
+      transform: scale(0.4);
+    }
+    .mdc-radio__background::before {
+    }
+    .mdc-radio__inner-circle {
+      border-width: #{calc($basesize / 4)};
+      height: #{calc($basesize / 2)};
+      width: #{calc($basesize / 2)};
+    }
+    .mdc-radio__native-control {
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+  }
+  @include sizes(2.5em);
+}
+
+
+/**************** angular material css overrides ****************************/
+.mat-mdc-radio-button .mat-radio-ripple .mat-ripple-element {
+  opacity: 0 !important;
+}
+
+.mat-mdc-radio-button {
+  label {
+    cursor: pointer;
+  }
+  .mdc-radio--disabled + label {
+    opacity: 0.38;
+  }
+  .mdc-radio {
+    margin: -0.5em !important;
+  }
+}
+
+.mat-mdc-checkbox {
+  .mdc-checkbox {
+    margin: -0.5em !important;
+  }
+  &.mat-mdc-checkbox-disabled {
+    opacity: 0.38;
+    //label {
+    //  opacity: 0.38;
+    //}
+  }
+}
+
+.mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
+  color: unset !important;
+}
+
+.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
+  font-weight: 500;
+}
+
+
+
+
+:root {
+  --mdc-typography-body1-font-size: 1em;
+  --mdc-typography-body1-line-height: 1.2em;
+  --mdc-typography-body1-letter-spacing: 0;
+  --mdc-typography-body2-font-size: 1em;
+  --mdc-typography-body2-line-height: 1.2em;
+  --mdc-typography-body2-letter-spacing: 0;
+  --mdc-typography-button-letter-spacing: 0;
+  --mdc-typography-button-font-size: 1em;
+  --mdc-typography-button-font-weight: 400;
+}