@rxap/plugin-angular 16.1.0-dev.8 → 16.1.0

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

@@ -0,0 +1,14 @@
+@use "variables";
+@use '@angular/material' as mat;
+@use 'palette' as palette;
+
+@import "fonts";
+@import 'utilities';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@include mat.core();
+
+@include init-theme();

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

@@ -0,0 +1,112 @@
+@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
+    ),
+    typography: mat.define-typography-config(
+      $font-family: var(--font-family)
+    ),
+  ));
+  @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};
+      }
+    }
+  }
+
+}
+
+@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,77 @@
+: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);
+
+  --font-family-sans: 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
+  --font-family-serif: 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif';
+  --font-family-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace';
+  --font-family-default: 'Roboto', 'sans-serif';
+  --font-family-mooli: 'Mooli', 'sans-serif';
+  --font-family-inclusive-sans: 'Inclusive Sans', 'sans-serif';
+  --font-family-fuggles: 'Fuggles', 'sans-serif';
+  --font-family-pixelify-sans: 'Pixelify Sans', 'sans-serif';
+  --font-family-roboto-mono: 'Roboto Mono', 'sans-serif';
+  --font-family-croissant-one: 'Croissant One', 'sans-serif';
+  --font-family-young-serif: 'Young Serif', 'sans-serif';
+  --font-family: var(--font-family-default);
+  --density: 0;
+
+}
+

package/src/generators/init-application/files/styles/fonts/_croissant-one.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Croissant One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./croissant-one.ttf) format('truetype');
+}

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

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Fuggles';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fuggles.ttf) format('truetype');
+}

package/src/generators/init-application/files/styles/fonts/_inclusive-sans.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Inclusive Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./inclusive-sans.ttf) format('truetype');
+}

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;
+}

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

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Mooli';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./molli.ttf) format('truetype');
+}

package/src/generators/init-application/files/styles/fonts/_pixelify-sans.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Pixelify Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./pixelify-sans.ttf) format('truetype');
+}

package/src/generators/init-application/files/styles/fonts/_roboto-mono.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./roboto-mono.ttf) format('truetype');
+}

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

@@ -0,0 +1,95 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrIzc.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjARc9.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu52xP.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ABc9.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBhc9.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBBc9.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgWxP.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAw.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlvAw.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtvAw.ttf) format('truetype');
+}

package/src/generators/init-application/files/styles/fonts/_young-serif.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Young Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./young-serif.ttf) format('truetype');
+}