@rxap/plugin-angular 16.1.0-dev.4 → 16.1.0-dev.41

package/src/generators/init-application/files/styles/_utilities.scss

@@ -0,0 +1,133 @@
+@use '@angular/material' as mat;
+@use 'palette' as palette;
+
+@import "table";
+@import 'loading-animation';
+
+@mixin colors($theme) {
+  $background: mat.get-color-from-palette(map-get($theme, background), background);
+  $foreground: mat.get-color-from-palette(map-get($theme, foreground), text);
+
+  --background-color: #{$background};
+  --foreground-color: #{$foreground};
+
+  --accept-color: rgb(115, 190, 105);
+  --decline-color: rgb(204, 73, 51);
+
+  @include mat.all-component-colors($theme);
+
+  @include table-theme($theme);
+  @include loadingAnimation($background);
+}
+
+@mixin density($theme) {
+  @include mat.all-component-densities($theme);
+}
+
+@mixin typography($theme) {
+  @include mat.all-component-typographies($theme);
+}
+
+@mixin base-theme() {
+  $theme: mat.define-light-theme((
+    color: (
+      primary: mat.$blue-palette,
+      accent: mat.$cyan-palette,
+      warn: mat.$red-palette
+    ),
+  ));
+  @include mat.core-theme($theme);
+  @include density($theme);
+  @include typography($theme);
+
+  body {
+    background-color: var(--background-color);
+    color: var(--foreground-color);
+
+    @for $i from -3 through -1 {
+      &.density#{$i} {
+        @include density(mat.define-light-theme((
+          // https://m2.material.io/design/layout/applying-density.html#usage
+          // between -3 and 0
+          // density < -1 -> form field label not visible
+          density: $i,
+        )));
+        --density: #{$i};
+      }
+      &.typography-mono {
+        @include typography(mat.define-light-theme((
+          typography: mat.define-typography-config(
+            $font-family: theme("fontFamily.mono")
+          ),
+        )));
+        --typography: mono;
+      }
+      &.typography-serif {
+        @include typography(mat.define-light-theme((
+          typography: mat.define-typography-config(
+            $font-family: theme("fontFamily.serif")
+          ),
+        )));
+        --typography: serif;
+      }
+      &.typography-sans {
+        @include typography(mat.define-light-theme((
+          typography: mat.define-typography-config(
+            $font-family: theme("fontFamily.sans")
+          ),
+        )));
+        --typography: sans;
+      }
+    }
+  }
+
+}
+
+@mixin body-theme($theme) {
+  @include colors($theme);
+}
+
+@mixin init-theme(
+  $theme-primary: mat.define-palette(palette.$primary-pat),
+  $theme-accent: mat.define-palette(palette.$accent-pat),
+  $theme-warn: mat.define-palette(palette.$warn-pat),
+  $scope: null
+) {
+
+  $light-theme: mat.define-light-theme((
+    color: (
+      primary: $theme-primary,
+      accent: $theme-accent,
+      warn: $theme-warn
+    ),
+  ));
+
+  $dark-theme: mat.define-dark-theme((
+    color: (
+      primary: $theme-primary,
+      accent: $theme-accent,
+      warn: $theme-warn
+    ),
+  ));
+
+  // generate the base theme independent of the preferred color scheme
+  @include base-theme();
+
+  @if $scope {
+    body.#{$scope} {
+      @include body-theme($light-theme);
+
+      &.dark, &.dark-theme {
+        @include body-theme($dark-theme);
+      }
+    }
+  } @else {
+    body {
+      @include body-theme($light-theme);
+
+      &.dark, &.dark-theme {
+        @include body-theme($dark-theme);
+      }
+    }
+  }
+}

package/src/generators/init-application/files/styles/_variables.scss

@@ -0,0 +1,63 @@
+:root {
+  --primary-50: #fff8e1;
+  --primary-100: #ffecb3;
+  --primary-200: #ffe082;
+  --primary-300: #ffd54f;
+  --primary-400: #ffca28;
+  --primary-500: #ffc107;
+  --primary-600: #ffb300;
+  --primary-700: #ffa000;
+  --primary-800: #ff8f00;
+  --primary-900: #ff6f00;
+  --primary-a100: #ffe57f;
+  --primary-a200: #ffd740;
+  --primary-a400: #ffc400;
+  --primary-a700: #ffab00;
+
+  --accent-50: #e3f2fd;
+  --accent-100: #bbdefb;
+  --accent-200: #90caf9;
+  --accent-300: #64b5f6;
+  --accent-400: #42a5f5;
+  --accent-500: #28166f;
+  --accent-600: #1e88e5;
+  --accent-700: #1976d2;
+  --accent-800: #1565c0;
+  --accent-900: #0d47a1;
+  --accent-a100: #82b1ff;
+  --accent-a200: #448aff;
+  --accent-a400: #2979ff;
+  --accent-a700: #2962ff;
+
+  --warn-50: #fce7eb;
+  --warn-100: #f8c3cd;
+  --warn-200: #f39bab;
+  --warn-300: #ee7389;
+  --warn-400: #ea5570;
+  --warn-500: #e63757;
+  --warn-600: #e3314f;
+  --warn-700: #df2a46;
+  --warn-800: #db233c;
+  --warn-900: #d5162c;
+  --warn-a100: #ffffff;
+  --warn-a200: #ffd3d7;
+  --warn-a400: #ffa0a8;
+  --warn-a700: #ff8691;
+
+  --contrast-50: rgba(black, 0.87);
+  --contrast-100: rgba(black, 0.87);
+  --contrast-200: rgba(black, 0.87);
+  --contrast-300: rgba(black, 0.87);
+  --contrast-400: white;
+  --contrast-500: white;
+  --contrast-600: white;
+  --contrast-700: white;
+  --contrast-800: white;
+  --contrast-900: white;
+  --contrast-a100: rgba(black, 0.87);
+  --contrast-a200: rgba(black, 0.87);
+  --contrast-a400: rgba(black, 0.87);
+  --contrast-a700: rgba(black, 0.87);
+
+}
+

package/src/generators/init-application/files/styles/fonts/_material-icons.scss

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./material-icons.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+}