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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [16.1.0-dev.41](https://gitlab.com/rxap/packages/compare/@rxap/plugin-angular@16.1.0-dev.40...@rxap/plugin-angular@16.1.0-dev.41) (2023-09-28)
+
+### Features
+
+- support dynamic font families and theme density ([a212366](https://gitlab.com/rxap/packages/commit/a21236669cfe89f51b5946cd2d28e72411481dc9))
+
 # [16.1.0-dev.40](https://gitlab.com/rxap/packages/compare/@rxap/plugin-angular@16.1.0-dev.39...@rxap/plugin-angular@16.1.0-dev.40) (2023-09-27)
 
 ### Bug Fixes

package/README.md

@@ -19,7 +19,7 @@ yarn add @rxap/plugin-angular
 ```
 **Install peer dependencies:**
 ```bash
-yarn add @nx/devkit@^16.5.0 @rxap/generator-utilities@^1.1.0-dev.14 @rxap/plugin-localazy@^16.1.0-dev.11 @rxap/plugin-utilities@^16.1.0-dev.15 @rxap/ts-morph@^0.1.0-dev.11 @rxap/utilities@^16.0.0-dev.18 @rxap/workspace-ts-morph@^0.1.0-dev.8 @rxap/workspace-utilities@^0.1.0-dev.16 nx@^16.5.0 ts-morph@^18.0.0 tslib@2.6.2 
+yarn add @nx/devkit@^16.5.0 @rxap/generator-utilities@^1.1.0-dev.15 @rxap/plugin-localazy@^16.1.0-dev.11 @rxap/plugin-utilities@^16.1.0-dev.16 @rxap/ts-morph@^0.1.0-dev.12 @rxap/utilities@^16.0.0-dev.19 @rxap/workspace-ts-morph@^0.1.0-dev.9 @rxap/workspace-utilities@^0.1.0-dev.17 nx@^16.5.0 ts-morph@^18.0.0 tslib@2.6.2 
 ```
 **Execute the init generator:**
 ```bash

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "16.1.0-dev.40",
+  "version": "16.1.0-dev.41",
   "name": "@rxap/plugin-angular",
   "license": "GPL-3.0-or-later",
   "dependencies": {
@@ -11,17 +11,17 @@
   },
   "peerDependencies": {
     "@nx/devkit": "^16.5.0",
-    "@rxap/generator-utilities": "^1.1.0-dev.14",
+    "@rxap/generator-utilities": "^1.1.0-dev.15",
     "@rxap/plugin-localazy": "^16.1.0-dev.11",
-    "@rxap/plugin-utilities": "^16.1.0-dev.15",
-    "@rxap/ts-morph": "^0.1.0-dev.11",
-    "@rxap/utilities": "^16.0.0-dev.18",
-    "@rxap/workspace-ts-morph": "^0.1.0-dev.8",
-    "@rxap/workspace-utilities": "^0.1.0-dev.16",
+    "@rxap/plugin-utilities": "^16.1.0-dev.16",
+    "@rxap/ts-morph": "^0.1.0-dev.12",
+    "@rxap/utilities": "^16.0.0-dev.19",
+    "@rxap/workspace-ts-morph": "^0.1.0-dev.9",
+    "@rxap/workspace-utilities": "^0.1.0-dev.17",
     "nx": "^16.5.0",
     "ts-morph": "^18.0.0",
     "tslib": "2.6.2",
-    "@rxap/node-utilities": "1.1.0-dev.10"
+    "@rxap/node-utilities": "1.1.0-dev.11"
   },
   "author": {
     "name": "Merzough Münker",
@@ -47,7 +47,7 @@
     "packageGroup": [
       {
         "package": "@rxap/generator-utilities",
-        "version": "1.1.0-dev.14"
+        "version": "1.1.0-dev.15"
       },
       {
         "package": "@rxap/node-utilities",
@@ -59,7 +59,7 @@
       },
       {
         "package": "@rxap/plugin-utilities",
-        "version": "16.1.0-dev.15"
+        "version": "16.1.0-dev.16"
       },
       {
         "package": "@rxap/schematics-ts-morph",
@@ -67,19 +67,19 @@
       },
       {
         "package": "@rxap/ts-morph",
-        "version": "0.1.0-dev.11"
+        "version": "0.1.0-dev.12"
       },
       {
         "package": "@rxap/utilities",
-        "version": "16.0.0-dev.18"
+        "version": "16.0.0-dev.19"
       },
       {
         "package": "@rxap/workspace-ts-morph",
-        "version": "0.1.0-dev.8"
+        "version": "0.1.0-dev.9"
       },
       {
         "package": "@rxap/workspace-utilities",
-        "version": "0.1.0-dev.16"
+        "version": "0.1.0-dev.17"
       }
     ]
   },
@@ -94,7 +94,7 @@
   },
   "schematics": "./generators.json",
   "type": "commonjs",
-  "gitHead": "8d7aeb0f4a5ef9c6476b98d06c6f52f5d79d4a95",
+  "gitHead": "59ccd7cb7c25002337d832609de637b59b3e545f",
   "main": "./src/index.js",
   "types": "./src/index.d.ts"
 }

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

@@ -3,8 +3,7 @@
 @use '@angular/material' as mat;
 @use 'palette' as palette;
 
-@import "table";
-@import 'loading-animation';
+@import 'utilities';
 
 @tailwind base;
 @tailwind components;
@@ -12,91 +11,4 @@
 
 @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);
-  }
-
-}
+@include init-theme();

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