BP-1293: Add theming support to new rich-text editor for basic redactor configuration

libs/entry-components/styles/_generator.scss

@@ -8,6 +8,7 @@
 @use 'modules/components/toggle/generator' as toggle;
 @use 'modules/default-theme' as default;
 @use 'modules/vendors/angular-material/generator' as material-theme;
+@use 'modules/vendors/redactor/generator' as redactor;
 @use 'sass:map';
 @use 'partials/theming';
 
@@ -23,4 +24,5 @@
 	@include dialogs.generate-from($merged-theme);
 	@include checkboxes.generate-from($merged-theme);
 	@include toggle.generate-from($merged-theme);
+	@include redactor.generate-from($custom-theme);
 }

libs/entry-components/styles/modules/vendors/redactor/_buttons-generator.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+
+$material-button-background: #237BBB;
+
+@mixin generate-from($theme) {
+
+	$theming-buttons: map.get($theme, 'general', 'fonts', 'buttons');
+
+	.enigmatry-redactor-content button {
+		@if $theming-buttons {
+			background-color: map.get($theme, 'general', 'colors', 'primary');
+			font: {
+				family: map.get($theming-buttons, 'family');
+				size: map.get($theming-buttons, 'size');
+			}
+			letter-spacing: map.get($theming-buttons, 'letter-spacing');
+		}
+		@else {
+			background-color: $material-button-background;
+		}
+	}
+}

libs/entry-components/styles/modules/vendors/redactor/_generator.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use 'tables-generator' as tables;
+@use 'buttons-generator' as buttons;
+@use 'typography-generator' as typography;
+
+$redactor-checkboxes-selector: '[data-rx-type = 'todoitem'] input:checked::before';
+$default-material-checkbox: #E94887;
+
+@mixin generate-from($theme) {
+	@include typography.generate-from($theme);
+	@include tables.generate-from($theme);
+	@include buttons.generate-from($theme);
+
+	$theming-colors: map.get($theme, 'general', 'colors');
+	$theming-checkboxes: map.get($theme, 'general', 'checkboxes');
+
+	.enigmatry-redactor-content {
+		.rx-main-container, .rx-toolbox-container {
+			@if map.get($theme, 'general', 'inputs', 'background') {
+				background: map.get($theme, 'general', 'inputs', 'background');
+			}
+			@else {
+				background: transparent;
+			}
+		}
+
+		.rx-toolbar-buttons .rx-button {
+			&.active, &:hover {
+				@if map.get($theme, 'general', 'inputs', 'background') {
+					background: map.get($theme, 'general', 'inputs', 'background');
+				}
+				@else {
+					background: transparent;
+				}
+			}
+		}
+
+		@if $theming-checkboxes {
+			.rx-editor #{$redactor-checkboxes-selector} {
+				border-color: map.get($theming-checkboxes, 'background');
+				background-color: map.get($theming-checkboxes, 'background');
+			}
+		}
+		@else {
+			.rx-editor #{$redactor-checkboxes-selector} {
+				border-color: $default-material-checkbox;
+				background-color: $default-material-checkbox;
+			}
+		}
+	}
+}

libs/entry-components/styles/modules/vendors/redactor/_tables-generator.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+
+$material-odd-background: #F0F0F0;
+
+@mixin row-coloring($color, $rows) {
+	&:nth-child(#{$rows}) {
+		background-color: $color;
+	}
+}
+
+@mixin generate-from($theme) {
+	$theming-rows: map.get($theme, 'tables', 'rows', 'odd-even-background');
+
+	.enigmatry-redactor-content table tr {
+		@if (map.get($theme, 'tables', 'rows')) {
+			@include row-coloring(map.get($theming-rows, 'odd'), 'odd');
+			@include row-coloring(map.get($theming-rows, 'even'), 'even');
+		}
+		@else {
+			@include row-coloring($material-odd-background, 'odd');
+			@include row-coloring(transparent, 'even');
+		}
+	}
+}

libs/entry-components/styles/modules/vendors/redactor/_typography-generator.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	$theming-fonts: map.get($theme, 'general', 'fonts');
+	$redactor-th-selector: 'thead th';
+
+	.enigmatry-redactor-content {
+		.rx-editor, .rx-content {
+			@if $theming-fonts {
+				$body-font-family: map.get($theming-fonts, 'body', 'family');
+
+				font: {
+					family: map.get($theming-fonts, 'body', 'family');
+					size: map.get($theming-fonts, 'body', 'size');
+				}
+				letter-spacing: map.get($theming-fonts, 'body', 'letter-spacing');
+
+				h1, h2, h3, h4 {
+					font-family: map.get($theming-fonts, 'hero-titles', 'family');
+					letter-spacing: map.get($theming-fonts, 'hero-titles', 'letter-spacing');
+				}
+
+				h5, h6 {
+					font-family: map.get($theming-fonts, 'titles', 'family');
+					letter-spacing: map.get($theming-fonts, 'titles', 'letter-spacing');
+				}
+
+				table {
+					font-size: map.get($theming-fonts, 'body', 'size');
+
+					#{$redactor-th-selector} {
+						font-size: map.get($theme, 'tables', 'header', 'font-size');
+					}
+				}
+			}
+			@else {
+				color: rgb(0 0 0 / .6);
+				font-family: 'Roboto', sans-serif;
+			}
+		}
+	}
+}

libs/entry-components/styles/partials/theming.scss

@@ -1 +1,2 @@
 @use 'core/components';
+@use 'vendors/overrides';

libs/entry-components/styles/partials/vendors/_index.scss

@@ -0,0 +1 @@
+@use 'overrides/redactor';

libs/entry-components/styles/partials/vendors/overrides/_index.scss

@@ -0,0 +1 @@
+@use 'redactor';

libs/entry-components/styles/partials/vendors/overrides/redactor/_buttons.scss

@@ -0,0 +1,21 @@
+$material-box-shadow: 0 3px 1px -2px rgb(0 0 0 / .2), 0 2px 2px 0 rgb(0 0 0 / .14), 0 1px 5px 0 rgb(0 0 0 / .12);
+$material-box-shadow-hovered: 0 2px 4px -1px rgb(0 0 0 / .2), 0 4px 5px 0 rgb(0 0 0 / .14), 0 1px 10px 0 rgb(0 0 0 / .12);
+
+.enigmatry-redactor-content button {
+	height: 36px;
+	margin: 8px 8px 8px 0;
+	padding: 0 16px;
+	border: none;
+	border-radius: 4px;
+	box-shadow: $material-box-shadow;
+	color: #FFF;
+	font: {
+		family: 'Roboto', sans-serif;
+		weight: 500;
+		size: 14px;
+	}
+
+	&:hover {
+		box-shadow: $material-box-shadow-hovered;
+	}
+}

libs/entry-components/styles/partials/vendors/overrides/redactor/_general.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+
+$material-text-color: rgb(0 0 0 / .87);
+$material-border: rgb(0 0 0 / .38);
+$material-icon-color: rgb(0 0 0 / .54);
+
+.enigmatry-redactor-content {
+	.rx-editor, .rx-content {
+		color: $material-text-color;
+	}
+
+	.rx-button-icon svg {
+		fill: $material-icon-color;
+	}
+
+	.rx-main-container {
+		border-color: $material-border;
+	}
+}

libs/entry-components/styles/partials/vendors/overrides/redactor/_index.scss

@@ -0,0 +1,3 @@
+@use 'general';
+@use 'tables';
+@use 'buttons';

libs/entry-components/styles/partials/vendors/overrides/redactor/_tables.scss

@@ -0,0 +1,28 @@
+$redactor-first-row: 'tr:first-child';
+$redactor-last-row: 'tr:last-child';
+
+.enigmatry-redactor-content table {
+	th {
+		font-weight: 500;
+	}
+
+	#{$redactor-first-row} {
+		th, td {
+			border-top: none;
+		}
+	}
+
+	#{$redactor-last-row} td {
+		border-bottom: none;
+	}
+
+	th, td {
+		&:first-child {
+			border-left: none;
+		}
+
+		&:last-child {
+			border-right: none;
+		}
+	}
+}