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

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

@@ -0,0 +1,102 @@
+@use "variables";
+@use "fonts";
+@use '@angular/material' as mat;
+@use 'palette' as palette;
+
+@import "table";
+@import 'loading-animation';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@include mat.core();
+
+$theme-primary: mat.define-palette(palette.$primary-pat);
+$theme-accent: mat.define-palette(palette.$accent-pat, A200, A100, A400);
+$theme-warn: mat.define-palette(palette.$warn-pat);
+$theme-typography: mat.define-typography-config(
+  $font-family: theme("fontFamily.mono")
+);
+
+
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn
+  ),
+  // Only include `typography` and `density` in the default theme.
+  typography: $theme-typography,
+  // https://m2.material.io/design/layout/applying-density.html#usage
+  // between -3 and 0
+  // density < -1 -> form field label not visible
+  density: 0,
+));
+
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn
+  ),
+));
+
+// Emit theme-dependent styles for common features used across multiple components.
+@include mat.core-theme($light-theme);
+
+// Emit styles for MatButton based on `$light-theme`. Because the configuration
+// passed to `define-light-theme` omits typography, `button-theme` will not
+// emit any typography styles.
+@include mat.all-component-themes($light-theme);
+@include table-theme($light-theme);
+
+@mixin define-utility-variables($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $isDark: map-get($theme, is-dark);
+
+  --background-color: #{map-get($background, background)};
+  --primary-color: #{mat.get-color-from-palette($primary)};
+  --accent-color: #{mat.get-color-from-palette($accent)};
+  --warn-color: #{mat.get-color-from-palette($warn)};
+
+  --hint-text-color: #{mat.get-color-from-palette($foreground, hint-text)};
+  --foreground-color: #{mat.get-color-from-palette($foreground, base)};
+
+  --accept-color: rgb(115, 190, 105);
+  --decline-color: rgb(204, 73, 51);
+
+}
+
+@mixin body-theme($theme) {
+
+  $background: mat.get-color-from-palette(map-get($theme, background), background);
+  background-color: $background;
+  color: mat.get-color-from-palette(map-get($theme, foreground), text);
+  @include loadingAnimation($background);
+
+}
+
+:root {
+  @include define-utility-variables($light-theme);
+}
+
+body.dark {
+  @include mat.core-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
+  @include table-theme($dark-theme);
+  @include define-utility-variables($dark-theme);
+}
+
+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;
+}