@enigmatry/entry-components 19.0.1-preview.4 → 19.1.0

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

@@ -5,15 +5,33 @@ $radio-circles-selector: '.mdc-radio__outer-circle, .mdc-radio__inner-circle';
 
 @mixin generate-from($theme) {
 	$radio-border: map.get($theme, 'general', 'buttons', 'radio', 'background');
+	$disabled-border-color: map.get($theme, 'general', 'buttons', 'radio', 'disabled', 'border-color');
+	$disabled-color: map.get($theme, 'general', 'buttons', 'radio', 'disabled', 'color');
 
 	@if $radio-border {
 		.mat-mdc-radio-group .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio {
-				
-			&:not(:disabled):active #{$radio-selector}, #{$radio-selector} {
+			&:not(:disabled):active #{$radio-selector},
+			#{$radio-selector} {
 				#{$radio-circles-selector} {
 					border-color: $radio-border;
 				}
 			}
 		}
 	}
+
+	@if $disabled-border-color or $disabled-color {
+		.mat-mdc-radio-button.mat-mdc-radio-disabled {
+			#{$radio-circles-selector} {
+				@if $disabled-border-color {
+					border-color: $disabled-border-color;
+				}
+			}
+
+			.mdc-label {
+				@if $disabled-color {
+					color: $disabled-color;
+				}
+			}
+		}
+	}
 }

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

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth, selector-max-pseudo-class, scss/block-no-redundant-nesting */
 @use 'sass:map';
 
 /* stylelint-disable-next-line @stylistic/max-line-length */
@@ -6,6 +7,8 @@ $checkbox-selector: '.mdc-checkbox__native-control:enabled:not(:checked):not(:in
 @mixin generate-from($theme) {
 	$background: map.get($theme, 'general', 'checkboxes', 'background');
 	$border-hover-color: map.get($theme, 'general', 'checkboxes', 'border-hover-color');
+	$disabled-color: map.get($theme, 'general', 'checkboxes', 'disabled', 'color');
+	$disabled-border-color: map.get($theme, 'general', 'checkboxes', 'disabled', 'border-color');
 
 	@if $background or $border-hover-color {
 		.mat-mdc-checkbox {
@@ -16,9 +19,7 @@ $checkbox-selector: '.mdc-checkbox__native-control:enabled:not(:checked):not(:in
 			}
 
 			&:hover {
-				/* stylelint-disable-next-line selector-max-pseudo-class */
 				.mdc-checkbox:hover {
-					/* stylelint-disable-next-line max-nesting-depth */
 					@if $background and $border-hover-color {
 						#{$checkbox-selector} {
 							border-color: $border-hover-color;
@@ -29,4 +30,20 @@ $checkbox-selector: '.mdc-checkbox__native-control:enabled:not(:checked):not(:in
 			}
 		}
 	}
+
+	@if $disabled-color or $disabled-border-color {
+		.mat-mdc-checkbox.mdc-checkbox--disabled {
+			.mdc-checkbox__background {
+				@if $disabled-border-color {
+					border-color: $disabled-border-color;
+				}
+			}
+
+			.mdc-label {
+				@if $disabled-color {
+					color: $disabled-color;
+				}
+			}
+		}
+	}
 }

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

@@ -1,14 +1,68 @@
+/* stylelint-disable max-nesting-depth, @stylistic/max-line-length */
 @use 'sass:map';
 
+$focused-label: '.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label';
+$disabled-field: '.mdc-text-field--filled.mdc-text-field--disabled, .mdc-text-field--outlined.mdc-text-field--disabled';
+$disabled-outline-border: '.mat-mdc-notch-piece';
+
 @mixin generate-from($theme) {
 	$input-background: map.get($theme, 'general', 'inputs', 'background');
+	$input-hover-background: map.get($theme, 'general', 'inputs', 'hover-background');
+	$label-focus-color: map.get($theme, 'general', 'inputs', 'label-focus-color');
+	$arrow-focus-color: map.get($theme, 'general', 'inputs', 'arrow-focus-color');
+	$disabled-color: map.get($theme, 'general', 'inputs', 'disabled', 'color');
+	$disabled-background: map.get($theme, 'general', 'inputs', 'disabled', 'background-color');
+	$disabled-border: map.get($theme, 'general', 'inputs', 'disabled', 'border-color');
+
+	.mat-mdc-form-field {
+		@if $input-background {
+			.mat-mdc-text-field-wrapper.mdc-text-field {
+				background-color: $input-background;
+
+				&.mdc-text-field--outlined {
+					border-radius: 4px;
+				}
+			}
+		}
+
+		@if $input-hover-background {
+			.mat-mdc-form-field-focus-overlay {
+				background-color: $input-hover-background;
+			}
+		}
+
+		@if $label-focus-color {
+			#{$focused-label} {
+				color: $label-focus-color;
+			}
+		}
+
+		@if $arrow-focus-color {
+			&.mat-focused .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
+				color: $arrow-focus-color;
+			}
+		}
+
+		@if $disabled-color or $disabled-background or $disabled-border {
+			#{$disabled-field} {
+				@if $disabled-background {
+					background-color: $disabled-background;
+				}
 
-	@if $input-background {
-		.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field {
-			background-color: $input-background;
+				@if $disabled-color {
+					.mdc-floating-label, .mdc-text-field__input {
+						color: $disabled-color;
+					}
+				}
 
-			&.mdc-text-field--outlined {
-				border-radius: 4px;
+				@if $disabled-border {
+					.mdc-line-ripple::before {
+						border-bottom-color: $disabled-border;
+					}
+					#{$disabled-outline-border} {
+						border-color: $disabled-border;
+					}
+				}
 			}
 		}
 	}

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

@@ -16,7 +16,7 @@
 
 	$primary-palette: theming.m2-define-palette(-get-material-palette-for('primary', $entry-theme));
 	$accent-palette: theming.m2-define-palette(-get-material-palette-for('accent', $entry-theme));
-	$warn-palette: theming.m2-define-palette(theming.$m2-red-palette);
+	$warn-palette: theming.m2-define-palette(-get-material-palette-for('warn', $entry-theme));
 
 	$typography: typography-generator.generate-from($entry-theme);
 	@include theming.typography-hierarchy($typography);

package/styles/partials/generator-test.scss

@@ -3,11 +3,7 @@
 $custom-theme: (
 	general: (
 		colors: (
-			primary: #FAE3C1,
-			disabled: (
-				foreground: cyan,
-				background: magenta
-			)
+			primary: #FAE3C1
 		),
 		fonts: (
 			body: (
@@ -20,12 +16,18 @@ $custom-theme: (
 		),
 		inputs: (
 			background: yellow
-		),
-		checkboxes: (
-			background: red,
-			border-hover-color: green
 		)
 	),
+	buttons: (
+		disabled: (
+			foreground: cyan,
+			background: magenta
+		)
+	),
+	checkboxes: (
+		background: red,
+		border-hover-color: green
+	),
 	tables: (
 		cells: (
 			edge-gap: 11px,