@enigmatry/entry-components 1.15.1-preview.27 → 1.15.1-preview.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.27",
+  "version": "1.15.1-preview.28",
   "author": "Enigmatry",
   "description": "Enigmatry entry angular material components",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",

package/styles/_generator.scss

@@ -2,6 +2,7 @@
 @use 'modules/components/forms/generator' as forms;
 @use 'modules/components/search-filter/generator' as search-filter;
 @use 'modules/components/tables/generator' as table;
+@use 'modules/components/buttons/generator' as buttons;
 @use 'modules/default-theme' as default;
 @use 'modules/vendors/angular-material/generator' as material-theme;
 @use 'sass:map';
@@ -11,6 +12,7 @@
 	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
 
 	@include material-theme.generate-from($merged-theme);
+	@include buttons.generate-from($merged-theme);
 	@include table.generate-from($merged-theme);
 	@include forms.generate-from($merged-theme);
 	@include search-filter.generate-from($merged-theme);

package/styles/modules/_default-theme.scss

@@ -1,11 +1,16 @@
 $theme: (
 	general: (
+		density: 0,
 		colors: (
 			primary-theme: null,
 			accent-theme: null,
 			primary: #2581C4,
 			accent: #EA518D,
-			font: #323232
+			font: #323232,
+			disabled: (
+				foreground: rgb(0 0 0 / .38),
+				background: rgb(0 0 0 / .12)
+			)
 		),
 		typography: null,
 		fonts: (

package/styles/modules/components/buttons/_generator.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-button.mdc-button:disabled {
+		background-color: map.get($theme, 'general', 'colors', 'disabled', 'background');
+		color: map.get($theme, 'general', 'colors', 'disabled', 'foreground');
+	}
+}

package/styles/modules/vendors/angular-material/_generator.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable scss/no-duplicate-dollar-variables */
 @use '@angular/material' as theming;
 @use 'palette-generator';
 @use 'typography-generator';
@@ -5,31 +6,32 @@
 @use '../../typography/fonts';
 
 /* stylelint-disable scss/function-no-unknown */
-@mixin generate-from($theme) {
+@mixin generate-from($entry-theme) {
 	@include theming.core();
-	$body-font: map.get($theme, 'general', 'fonts', 'body', 'family');
+	$body-font: map.get($entry-theme, 'general', 'fonts', 'body', 'family');
 
 	@if $body-font == '' {
 		@include fonts.generate-default-font();
 	}
 
-	$primary-palette: theming.define-palette(-get-material-palette-for('primary', $theme));
-	$accent-palette: theming.define-palette(-get-material-palette-for('accent', $theme));
+	$primary-palette: theming.define-palette(-get-material-palette-for('primary', $entry-theme));
+	$accent-palette: theming.define-palette(-get-material-palette-for('accent', $entry-theme));
 	$warn-palette: theming.define-palette(theming.$red-palette);
 
-	$typography: typography-generator.generate-from($theme);
+	$typography: typography-generator.generate-from($entry-theme);
 	@include theming.typography-hierarchy($typography);
 
-	$default-theme: theming.define-light-theme((
+	$material-theme: theming.define-light-theme((
 		color: (
 			primary: $primary-palette,
 			accent: $accent-palette,
-			warn: $warn-palette
+			warn: $warn-palette,
 		),
-		typography: $typography
+		typography: $typography,
+		density: map.get($entry-theme, 'general', 'density')
 	));
-	
-	@include theming.all-component-themes($default-theme);
+
+	@include theming.all-component-themes($material-theme);
 }
 
 @function -get-material-palette-for($key, $theme) {
@@ -41,4 +43,4 @@
 
 	$color: map.get($theme, 'general', 'colors', $key);
 	@return palette-generator.generate-from($color);
-}
+}

package/styles/modules/vendors/angular-material/_typography-generator.scss

@@ -17,9 +17,10 @@
 	$typography: theming.define-typography-config();
 
 	$typography: -set-font-size-for('body', $typography, $fonts, ('body-1', 'body-2'));
-	$typography: -set-font-size-for('buttons', $typography, $fonts, ('buttons'));
-	$typography: -set-font-size-for('hero-titles', $typography, $fonts, ('headline-1', 'headline-2', 'headline-3', 'headline-4'));
-	$typography: -set-font-size-for('titles', $typography, $fonts, ('headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'));
+	$typography: -set-font-size-for('buttons', $typography, $fonts, ('button'));
+	$typography: -set-font-size-for('hero-titles',$typography,$fonts,('headline-1', 'headline-2',
+	'headline-3', 'headline-4', 'headline-5', 'headline-6'));
+	$typography: -set-font-size-for('titles', $typography, $fonts, ('subtitle-1', 'subtitle-2'));
 	$typography: -set-font-family($typography, $fonts);
 
 	@return $typography;
@@ -81,7 +82,7 @@
 @function -generate-defaults-from($typography) {
 	// Return Roboto (default Angular Material's font (for now).
 	// $typography: -set-text-groups-for($typography, 'OpenSans-normal', 'OpenSans-bold');
-	// $typography: -set-typography-group($typography,('headline-1', 'headline-2', 'headline-3', 
+	// $typography: -set-typography-group($typography,('headline-1', 'headline-2', 'headline-3',
 	// 'headline-4', 'headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'),'Montserrat-bold');
 	@return $typography;
 }

package/styles/partials/generator-test.scss

@@ -3,12 +3,19 @@
 $custom-theme: (
 	general: (
 		colors: (
-			primary: #FAE3C1
+			primary: #FAE3C1,
+			disabled: (
+				foreground: cyan,
+				background: magenta
+			)
 		),
 		fonts: (
 			body: (
 				family: 'My-Font',
 				size: 41px
+			),
+			buttons: (
+				size: 26px
 			)
 		)
 	),