@enigmatry/entry-components 1.15.1-preview.9 → 15.0.0-preview

package/styles/modules/_default-theme.scss

@@ -1,87 +1,64 @@
-/* stylelint-disable number-max-precision */
 $theme: (
 	general: (
+		density: 0,
 		colors: (
+			primary-theme: null,
+			accent-theme: null,
 			primary: #2581C4,
 			accent: #EA518D,
-			dark: #323232,
-			disabled: #D9D9D9,
-			disabled-light: #F5F5F5
-		),
-		font: (
-			family: '',
-			size: 14px
-		),
-		buttons: (
-			color: #FFF
+			font: #323232,
+			disabled: (
+				foreground: rgb(0 0 0 / .38),
+				background: rgb(0 0 0 / .12)
+			)
 		),
-		inputs: (
-			background-color: #FFF
-		)
-	),
-	forms: (
-		fields: (
-			infix-padding-top: .4375em,
-			infix-padding-bottom: .4375em,
-			label-color: #0000008A,
-			underline-display: block,
-			outline: (
-				border: 2px solid #EBEBEB,
-				border-hover: 2px solid #2581C4,
-				border-right: none,
-				border-left: none,
-				disabled-background: #F5F5F5,
-				disabled-hover: 2px solid #EBEBEB, 
+		typography: null,
+		fonts: (
+			hero-titles: (
+				family: '',
+				size: 0
+			),
+			titles: (
+				family: '',
+				size: 0
+			),
+			body: (
+				family: '',
+				size: 0
+			),
+			buttons: (
+				family: '',
+				size: 0
 			)
 		),
-		checkboxes: (
-			width: 20px,
-			height: 20px,
-			background-color: #FFF,
-			checkmark-color: #000,
-			selected-border-color: #000,
-			selected-background-color: #FFF,
-			border: 2px solid #0000008A,
-			border-hover: 2px solid #0000008A,
-			border-radius: 0,
-			label-breaking: nowrap,
+		spacing: (
+			default: 15px
 		),
-		radio-buttons: (
-			align: flex-start,
-			white-space: nowrap,
+		inputs: (
+			background: null
 		),
+		buttons: (
+			icon-size: 48px
+		)
 	),
 	tables: (
 		cells: (
-			first-cell-padding-left: 4px,
-			last-cell-padding-right: 4px,
-			min-width: unset
+			edge-gap: 4px,
+			padding: null
 		),
 		rows: (
-			selected-background-color: #06C,
 			selected-color: #FFF,
+			disabled-color: #F5F5F5,
 			odd-even-row: odd,
 			odd-even-background: #F0F0F0
 		),
-		columns: (
-			sorted: (
-				font-weight: 700,
-				content-align: left
-			)
-		),
 		contents: (
 			no-result: (
 				font-size: 13px,
-				font-weight: 500,
-				text-transform: none
+				font-weight: 500
 			)
 		)
 	),
-	headers: (
-		title: (
-			size: 32px
-		)
-	),
 	dialogs: (
 		title: (
 			size: 20px

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/components/dialogs/_generator.scss

@@ -2,10 +2,15 @@
 
 @mixin generate-from($theme) {
 	.entry-dialog {
-		.title {
-			color: map.get($theme, 'general', 'colors', 'dark');
+		.dialog-header .title {
+			$close-icon-width: map.get($theme, 'general', 'buttons', 'icon-size');
+			width: calc(100% - $close-icon-width);
+			color: map.get($theme, 'general', 'colors', 'font');
 			font-size: map.get($theme, 'dialogs', 'title', 'size');
+
+			&.without-close-icon {
+				width: 100%;
+			}
 		}
-		font-size: map.get($theme, 'general', 'font', 'size');
 	}
 }

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

@@ -1,9 +1,15 @@
-@use 'outlines/general' as appearance-outlines;
-@use 'selectors/checkboxes';
-@use 'selectors/radio-buttons';
+@use 'sass:map';
 
 @mixin generate-from($theme) {
-	@include appearance-outlines.generate-from($theme);
-	@include checkboxes.generate-from($theme);
-	@include radio-buttons.generate-from($theme);
+	$default-gap: map.get($theme, 'general', 'spacing', 'default');
+
+	.entry-form {
+		.action-buttons {
+			margin-top: $default-gap;
+		}
+
+		.mat-mdc-form-field {
+			margin-bottom: $default-gap;
+		}
+	}
 }

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

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	$input-background: map.get($theme, 'general', 'inputs', 'background');
+
+	@if $input-background {
+		.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field {
+			background-color: $input-background;
+
+			&.mdc-text-field--outlined {
+				border-radius: 4px;
+			}
+		}
+	}
+}

package/styles/modules/components/search-filter/_generator.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	$default-gap: map.get($theme, 'general', 'spacing', 'default');
+
+	.search-form-container {
+		.entry-button {
+			margin-bottom: $default-gap;
+		}
+
+		.form-field {
+			margin-right: 2 * $default-gap;
+		}
+	}
+}

package/styles/modules/components/tables/_cells.scss

@@ -1,23 +1,26 @@
 @use 'sass:map';
 
 @mixin generate-from($theme) {
+	$row-edge-gap: map.get($theme, 'tables', 'cells', 'edge-gap');
+	$cell-padding: map.get($theme, 'tables', 'cells', 'padding');
+
 	.mat-mdc-cell {
-		color: map.get($theme, 'general', 'colors', 'dark');
-	}
+		color: map.get($theme, 'general', 'colors', 'font');
 
-	.mat-mdc-cell, .mat-mdc-header-cell {
-		font-size: map.get($theme, 'general', 'font', 'size');
+		@if $cell-padding {
+			padding: $cell-padding;
+		}
 	}
 
 	.mat-mdc-header-cell:first-of-type, .mat-mdc-cell:first-of-type, .mat-mdc-footer-cell:first-of-type {
-		padding-left: map.get($theme, 'tables', 'cells', 'first-cell-padding-left');
+		padding-left: $row-edge-gap;
 	}
 
 	.mat-mdc-header-cell:last-of-type, .mat-mdc-cell:last-of-type, .mat-mdc-footer-cell:last-of-type {
-		padding-right: map.get($theme, 'tables', 'cells', 'last-cell-padding-right');
+		padding-right: $row-edge-gap;
 	}
 
-	.entry-table-checkbox-cell, .entry-table-context-menu-cell {
-		min-width: map.get($theme, 'tables', 'cells', 'min-width');
+	.selection-cell, .action-cell {
+		width: map.get($theme, 'general', 'buttons', 'icon-size');
 	}
 }

package/styles/modules/components/tables/_no-result.scss

@@ -1,9 +1,7 @@
 @use 'sass:map';
 
 @mixin generate-from($theme) {
-	.entry-table-no-result {
-		text-transform: map.get($theme, 'tables', 'contents', 'no-result', 'text-transform');
-        
+	.entry-table .no-results {
 		font: {
 			size: map.get($theme, 'tables', 'contents', 'no-result', 'font-size');
 			weight: map.get($theme, 'tables', 'contents', 'no-result', 'font-weight');

package/styles/modules/components/tables/_rows.scss

@@ -3,51 +3,21 @@
 
 @mixin generate-from($theme) {
 	.mat-mdc-row {
-		$edge-selected-color: map.get($theme, 'forms', 'checkboxes', 'selected-border-color');
-		
-		@include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
-		map.get($theme, 'tables', 'rows', 'odd-even-row'));
+		&.mdc-data-table__row {
+			@include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
+			map.get($theme, 'tables', 'rows', 'odd-even-row'));
 
-		/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-		.mat-checkbox-inner-container {
-			background-color: map.get($theme, 'forms', 'checkboxes', 'background-color');
-		}
+			&.selected {
+				background-color: map.get($theme, 'general', 'colors', 'primary');
 
-		&.selected {
-			background-color: map.get($theme, 'tables', 'rows', 'selected-background-color');
-    
-			.mat-mdc-cell {
-				color: map.get($theme, 'tables', 'rows', 'selected-color');
+				.mat-mdc-cell {
+					color: map.get($theme, 'tables', 'rows', 'selected-color');
+				}
 			}
 
-			/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-			.mat-checkbox-checked {
-				/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-				.mat-checkbox-background {
-					background-color: map.get($theme, 'forms', 'checkboxes', 'selected-background-color');
-        
-					/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-					/* stylelint-disable-next-line max-nesting-depth, selector-max-combinators, selector-max-compound-selectors */
-					.mat-checkbox-checkmark-path {
-						/* stylelint-disable-next-line declaration-no-important */
-						stroke: $edge-selected-color !important;
-					}
-				}
-        
-				/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-				.mat-checkbox-frame {
-					border-color: $edge-selected-color;
-				}
+			&.mat-row-disabled {
+				background-color: map.get($theme, 'tables', 'rows', 'disabled-color');
 			}
 		}
 	}
-
-	.mat-row-disabled {
-		background-color: map.get($theme, 'general', 'colors', 'disabled-light');
-	}
-
-	.entry-table-menu .context-menu-item:hover {
-		background-color: map.get($theme, 'general', 'colors', 'accent');
-		color: map.get($theme, 'general', 'colors', 'dark');
-	}
 }

package/styles/modules/components/tables/_sorting.scss

@@ -2,17 +2,10 @@
 
 @mixin generate-from($theme) {
 	.mat-sort-header-sorted {
-		font: {
-			size: map.get($theme, 'general', 'font', 'size');
-			weight: map.get($theme, 'tables', 'columns', 'sorted', 'font-weight');
-		}
+		font-weight: 700;
 	}
 
 	.mat-sort-header-sorted, .mat-sort-header-arrow {
-		color: map.get($theme, 'general', 'colors', 'dark');
-	}
-
-	.mat-sort-header-content {
-		text-align: map.get($theme, 'tables', 'columns', 'sorted', 'content-align');
+		color: map.get($theme, 'general', 'colors', 'font');
 	}
 }

package/styles/modules/typography/_fonts.scss

@@ -1,71 +1,64 @@
 @use 'sass:map';
 
-$font-path: '../../../../assets/fonts/';
+$font-path: '/assets/fonts/';
 $font-sources: (
 	(
-		name: 'OpenSans',
+		name: 'Roboto',
 		style: normal,
-		formats: ('eot', 'woff', 'woff2', 'ttf')
+		formats: ('woff2'),
+		weight: 400
 	),
 	(
-		name: 'OpenSans',
+		name: 'Roboto',
 		style: bold,
-		formats: ('eot', 'woff', 'woff2', 'ttf')
-	),
-	(
-		name: 'Montserrat',
-		style: bold,
-		formats: ('eot', 'woff', 'woff2', 'ttf')
+		formats: ('woff2'),
+		weight: 500
 	)
 );
 
+// $font-sources: (
+// 	(
+// 		name: 'OpenSans',
+// 		style: normal,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	),
+// 	(
+// 		name: 'OpenSans',
+// 		style: bold,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	),
+// 	(
+// 		name: 'Montserrat',
+// 		style: bold,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	)
+// );
+
 @mixin generate-default-font() {
 	@each $font in $font-sources {
 		$name: map.get($font, name);
 		$style: map.get($font, style);
 		$formats: map.get($font, formats);
+		$weight: map.get($font, weight);
 
 		@each $format in $formats {
 			$url: '#{$font-path}#{$name}/#{$name}-#{$style}.#{$format}';
 
 			@font-face {
 				font: {
-					family: '#{$name}-#{$style}';
 					style: '#{$style}';
+		
+					/* stylelint-disable property-no-unknown, max-nesting-depth */
+					@if $weight {
+						family: '#{$name}';
+						weight: $weight;
+					}
+					@else {
+						family: '#{$name}-#{$style}';
+					}
 				}
 				src: url('#{$url}') format('#{$format}');
 			}
 		}
 	}
 }
-
-@mixin font($family: 'OpenSans-normal', $size: 14px) {
-	font: {
-		family: $family;
-		size: $size;
-	};
-}
-
-@mixin main-font($size: 14px) {
-	@include font('OpenSans-normal', $size);
-}
-
-@mixin main-bolded-font($size: 14px) {
-	@include font('OpenSans-Bold', $size);
-}
-
-@mixin title-font($size: 20px) {
-	@include font('Montserrat-bold', $size);
-}
-
-@mixin font-family-from($theme) {
-	$font-family: map.get($theme, 'general', 'font', 'family');
-
-	@if $font-family == '' {
-		@content;
-	}
-	@else {
-		$font-size: map.get($theme, 'general', 'font', 'size');
-		@include font($font-family, $font-size);
-	}
-}

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

@@ -0,0 +1,46 @@
+/* stylelint-disable scss/no-duplicate-dollar-variables */
+@use '@angular/material' as theming;
+@use 'palette-generator';
+@use 'typography-generator';
+@use 'sass:map';
+@use '../../typography/fonts';
+
+/* stylelint-disable scss/function-no-unknown */
+@mixin generate-from($entry-theme) {
+	@include theming.core();
+	$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', $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($entry-theme);
+	@include theming.typography-hierarchy($typography);
+
+	$material-theme: theming.define-light-theme((
+		color: (
+			primary: $primary-palette,
+			accent: $accent-palette,
+			warn: $warn-palette,
+		),
+		typography: $typography,
+		density: map.get($entry-theme, 'general', 'density')
+	));
+
+	@include theming.all-component-themes($material-theme);
+}
+
+@function -get-material-palette-for($key, $theme) {
+	$palette: map.get($theme, 'general', 'colors', $key + '-theme');
+
+	@if $palette {
+		@return $palette;
+	}
+
+	$color: map.get($theme, 'general', 'colors', $key);
+	@return palette-generator.generate-from($color);
+}

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

@@ -0,0 +1,32 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@function generate-from($color) {
+	$result: (
+		50: color.adjust($color, $lightness: -30%),
+		contrast: (
+			50: #212121,
+			100: #212121,
+			200: #212121,
+			300: #212121,
+			400: #212121,
+			500: #FFF,
+			600: #FFF,
+			700: #FFF,
+			800: #FFF,
+			900: #FFF,
+			a100: #212121,
+			a200: #212121,
+			a400: #FFF,
+			a700: #FFF
+		)
+	);
+
+	@for $counter from 1 through 9 {
+		$blended-color: color.adjust($color, $lightness: -27 + $counter * 5%);
+		/* stylelint-disable-next-line scss/no-duplicate-dollar-variables */
+		$result: map.set($result, $counter * 100, $blended-color);
+	}
+
+	@return $result;
+}

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

@@ -0,0 +1,101 @@
+/* stylelint-disable scss/no-duplicate-dollar-variables, scss/function-no-unknown */
+@use '@angular/material' as theming;
+@use 'sass:map';
+
+@function generate-from($theme) {
+	$theme-typography: map.get($theme, 'general', 'typography');
+
+	@if $theme-typography {
+		@return $theme-typography;
+	}
+
+	@return -generate-typography-from($theme);
+}
+
+@function -generate-typography-from($theme) {
+	$fonts: map.get($theme, 'general', 'fonts');
+	$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, ('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;
+}
+
+@function -set-font-size-for($selector, $typography, $fonts, $desired-size-settings) {
+	$desired-size: map.get($fonts, $selector, 'size');
+
+	@if $desired-size != 0 {
+		@each $setting in $desired-size-settings {
+			$typography: map.set($typography, $setting, 'font-size', $desired-size);
+		}
+	}
+
+	@return $typography;
+}
+
+@function -set-font-family($typography, $fonts) {
+	$body-font: map.get($fonts, 'body', 'family');
+
+	@if $body-font == '' {
+		@return -generate-defaults-from($typography);
+	}
+
+	$typography: -set-typography-group($typography, ('body-1', 'body-2', 'caption'), $body-font);
+
+	$titles-font: map.get($fonts, 'titles', 'family');
+	$hero-titles-font: map.get($fonts, 'hero-titles', 'family');
+	$buttons-font: map.get($fonts, 'buttons', 'family');
+
+	// We fallback to body font if buttons font isn't provided.
+	@if $buttons-font == '' {
+		$buttons-font: $body-font;
+	}
+
+	// Both titles font fallback to body font unless main one's being set.
+	@if $hero-titles-font == '' and $titles-font == '' {
+		$hero-titles-font: $body-font;
+		$titles-font: $body-font;
+	}
+	@else if $hero-titles-font == '' and $titles-font != '' {
+		$hero-titles-font: $titles-font;
+	}
+
+	$typography: -set-text-groups-for($typography, $body-font, $buttons-font);
+	$typography: -set-typography-group($typography, ('headline-1', 'headline-2', 'headline-3', 'headline-4'), $hero-titles-font);
+	$typography: -set-typography-group($typography, ('headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'), $titles-font);
+	$typography: map.set($typography, 'font-family', '"#{$buttons-font}"');
+
+	@return $typography;
+}
+
+@function -set-text-groups-for($typography, $body-font, $buttons-font) {
+	$typography: -set-typography-group($typography, ('body-1', 'body-2', 'caption'), $body-font);
+	$typography: -set-typography-group($typography, ('button'), $buttons-font);
+	@return $typography;
+}
+
+@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',
+	// 'headline-4', 'headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'),'Montserrat-bold');
+	@return $typography;
+}
+
+@function -set-typography-group($typography, $desired-typography-group, $font) {
+	@each $setting in $desired-typography-group {
+		$typography: -set-typography-font($typography, $setting, $font);
+	}
+
+	@return $typography;
+}
+
+@function -set-typography-font($typography, $section, $font) {
+	$typography: map.set($typography, $section, 'font-family', '"#{$font}"');
+	@return $typography;
+}

package/styles/partials/core/components/_index.scss

@@ -1,4 +1,4 @@
 @use 'dialogs/general' as dialogs;
-@use 'headers/general' as headers;
-@use 'tables';
-@use 'forms/general' as forms;
+@use 'tables/general' as tables;
+@use 'forms/general' as forms;
+@use 'search-filter/general' as search-filter;