ecabs-components 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",

package/styles/material/_theme.scss

@@ -0,0 +1,99 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '@angular/material/theming';
+
+// Plus imports for other components in your app.
+@import '../scss/utilities/index';
+@import './overrides/index';
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+$mat-primary: (
+  100: var(--color-brand-dark),
+  700: var(--color-brand-dark),
+  A700: var(--color-brand-dark),
+  contrast: (
+    A700: $light-primary-text,
+  ),
+);
+
+$mat-accent: (
+  A700: var(--color-brand-light),
+  contrast: (
+    A700: $light-primary-text,
+  ),
+);
+
+$mat-secondary: (
+  100: var(--color-brand-dark),
+  700: var(--color-brand-dark),
+  A700: var(--color-brand-dark),
+  contrast: (
+    A700: $light-primary-text,
+  ),
+);
+
+$mat-warning: (
+  100: var(--color-error),
+  500: var(--color-error),
+  700: var(--color-error),
+  A700: var(--color-error),
+  contrast: (
+    A700: $light-primary-text,
+  ),
+);
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$cuorium-primary: mat-palette($mat-primary, A700);
+$cuorium-accent: mat-palette($mat-secondary, A700);
+
+// The warn palette is optional (defaults to red).
+$cuorium-warn: mat-palette($mat-warning);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$cuorium-theme: mat-light-theme(
+  (
+    color: (
+      primary: $cuorium-primary,
+      accent: $cuorium-accent,
+      warn: $cuorium-warn,
+    ),
+  )
+);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($cuorium-theme);
+
+// Define a custom typography config that overrides the font-family as well as the
+// `headlines` and `body-1` levels.
+$custom-typography: mat-typography-config(
+  $font-family: $font-family-primary,
+  $body-1: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
+  $input: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
+  $headline: mat-typography-level($font-heading-lg, $base-line-height, $font-weight-medium),
+  $title: mat-typography-level($font-heading-base, $base-line-height, $font-weight-medium),
+  $subheading-2: mat-typography-level($font-heading-md, $base-line-height, $font-weight-medium),
+  $subheading-1: mat-typography-level($font-heading-sm, $base-line-height, $font-weight-medium),
+);
+
+@include angular-material-typography($custom-typography);
+
+.mat-body p,
+.mat-body-1 p,
+.mat-typography p {
+  margin: inherit;
+}
+
+mat-progress-bar {
+  .mat-progress-bar-buffer {
+    background-color: var(--color-brand-300) !important;
+  }
+}

package/styles/material/overrides/_autocomplete.scss

@@ -0,0 +1,11 @@
+.mat-autocomplete-panel {
+  margin-top: 0.2rem;
+
+  &, &.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
+    @extend .autocomplete-ui;
+  }
+
+  .mat-option {
+    @extend .autocomplete-ui--item;
+  }
+}