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,24 @@
+@use 'sass:map';
+
+$material-button-background: #237BBB;
+
+@mixin generate-from($theme) {
+
+	$theming-buttons: map.get($theme, 'general', 'fonts', 'buttons');
+
+	.enigmatry-redactor-content {
+		button, .rx-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/_checkboxes-generator.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+
+$redactor-checkboxes-selector: '[data-rx-type = 'todoitem'] ';
+$default-material-checkbox: #E94887;
+
+@mixin generate-from($theme) {
+
+	$theming-checkboxes: map.get($theme, 'general', 'checkboxes');
+
+	.enigmatry-redactor-content {
+
+		@if map.get($theme, 'general', 'colors', 'accent') {
+			.rx-editor #{$redactor-checkboxes-selector} input:checked::before {
+				border-color: map.get($theme, 'general', 'colors', 'accent');
+				background-color: map.get($theme, 'general', 'colors', 'accent');
+			}
+		}
+		@else {
+			.rx-editor #{$redactor-checkboxes-selector} input:checked::before {
+				border-color: $default-material-checkbox;
+				background-color: $default-material-checkbox;
+			}
+		}
+
+		@if $theming-checkboxes {
+			.rx-editor #{$redactor-checkboxes-selector} input::before {
+				background-color: map.get($theming-checkboxes, 'background');
+			}
+		}
+	}
+}

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

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use 'tables-generator' as tables;
+@use 'buttons-generator' as buttons;
+@use 'typography-generator' as typography;
+@use 'checkboxes-generator' as checkboxes;
+
+@mixin generate-from($theme) {
+	@include typography.generate-from($theme);
+	@include tables.generate-from($theme);
+	@include buttons.generate-from($theme);
+	@include checkboxes.generate-from($theme);
+
+	$theming-colors: map.get($theme, 'general', 'colors');
+
+	.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;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../../../../../scss-foundation/src/modules/lists/row-coloring' as list;
+
+$material-odd-background: #F0F0F0;
+
+@mixin generate-from($theme) {
+	$theming-table: map.get($theme, 'tables', 'rows', 'odd-even-background');
+
+	.enigmatry-redactor-content table {
+		@if $theming-table {
+			tr {
+				@include list.odd-row-coloring(map.get($theming-table, 'odd'));
+				@include list.even-row-coloring(map.get($theming-table, 'even'));
+			}
+		}
+		@else {
+			tr {
+				@include list.even-row-coloring($material-odd-background);
+				@include list.odd-row-coloring(transparent);
+			}
+		}
+
+		@if (map.get($theme, 'tables', 'header', 'font-size')) {
+			th {
+				font-size: map.get($theme, 'tables', 'header', 'font-size');
+			}
+		}
+	}
+}

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+$material-input-text: rgb(0 0 0 / .87);
+$material-font-family: 'Roboto', sans-serif;
+
+@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: $material-input-text;
+				font-family: $material-font-family;
+			}
+		}
+	}
+}

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,44 @@
+@use 'scss-foundation/src/modules/display/items';
+
+$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);
+$redactor-link-selectors: 'a, a:visited, a:focus, a:hover';
+
+.enigmatry-redactor-content .rx-content {
+	#{$redactor-link-selectors} {
+		@include items.fully-align(center, center);
+		display: inline-flex;
+		cursor: pointer;
+	}
+
+	button, #{$redactor-link-selectors} {
+		@include items.fully-align(center, flex-start);
+		height: 36px;
+		margin: 8px 8px 8px 0;
+		padding: 0 16px;
+		border: none;
+		color: #000;
+		text-decoration: none;
+
+		font: {
+			family: 'Roboto', sans-serif;
+			weight: 500;
+			size: 14px;
+		}
+	}
+
+	a:hover {
+		background-color: #F0F0F0;
+	}
+
+	button {
+		height: 36px;
+		border-radius: 4px;
+		box-shadow: $material-box-shadow;
+		color: #FFF;
+
+		&:hover {
+			box-shadow: $material-box-shadow-hovered;
+		}
+	}
+}

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

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+$material-text-color: rgb(0 0 0 / .87);
+$material-border: rgb(0 0 0 / .38);
+$material-border-radius: 2px;
+$material-icon-color: rgb(0 0 0 / .54);
+$material-checkbox-width: 18px;
+$material-checkbox-height: 18px;
+
+$redactor-todoitem-selector: '.rx-editor [data-rx-type = 'todoitem']';
+
+.enigmatry-redactor-content {
+	.rx-editor, .rx-content {
+		color: $material-text-color;
+	}
+
+	#{$redactor-todoitem-selector} {
+		input {
+			width: $material-checkbox-width;
+			height: $material-checkbox-height;
+		}
+
+		input::before, input:checked::before {
+			width: $material-checkbox-width;
+			height: $material-checkbox-height;
+			border-radius: $material-border-radius;
+			border-color: rgb(0 0 0 / .54);
+		}
+	}
+
+	.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,33 @@
+$redactor-first-row: 'tr:first-child';
+$redactor-last-row: 'tr:last-child';
+
+.enigmatry-redactor-content table {
+	th {
+		font-weight: 500;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	td {
+		border: 1px solid rgb(0 0 0 / .12);
+	}
+
+	#{$redactor-first-row} {
+		th, td {
+			border-top: none;
+		}
+	}
+
+	#{$redactor-last-row} td {
+		border-bottom: none;
+	}
+
+	th, td {
+		border: {
+			right: none;
+			left: none;
+		}
+	}
+}