diff --git a/libs/entry-components/styles/_generator.scss b/libs/entry-components/styles/_generator.scss index 139cc56a..9d3af1f6 100644 --- a/libs/entry-components/styles/_generator.scss +++ b/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/rich-text/generator' as rich-text; @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 rich-text.generate-from($merged-theme); } \ No newline at end of file diff --git a/libs/entry-components/styles/modules/vendors/rich-text/_generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/_generator.scss new file mode 100644 index 00000000..ec7eddc0 --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/_generator.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use 'necessary-mix/tables-generator' as tables; +@use 'necessary-mix/buttons-generator' as buttons; +@use 'necessary-mix/typography-generator' as typography; +@use 'necessary-mix/checkboxes-generator' as checkboxes; +@use 'necessary-mix/toolbar-generator' as toolbar; + +@mixin generate-from($theme) { + @include typography.generate-from($theme); + @include tables.generate-from($theme); + @include buttons.generate-from($theme); + @include checkboxes.generate-from($theme); + @include toolbar.generate-from($theme); +} diff --git a/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_buttons-generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_buttons-generator.scss new file mode 100644 index 00000000..c8236cbe --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_buttons-generator.scss @@ -0,0 +1,34 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +$default-material-button: map.get(mat.define-typography-config(), 'button'); + +@mixin generate-from($theme) { + $theming-primary: map.get($theme, 'general', 'colors', 'primary'); + $theming-button-fonts: map.get($theme, 'general', 'fonts', 'buttons'); + $theming-font-family: map.get($theming-button-fonts, 'family'); + $theming-font-weight: map.get($theming-button-fonts, 'weight'); + $theming-font-size: map.get($theming-button-fonts, 'size'); + + $primary-color: if($theming-primary == '' or $theming-primary == null, mat.get-color-from-palette(mat.$primary-palette, 500), $theming-primary); + $font-family: if($theming-font-family == '' or $theming-font-family == null, map.get($default-material-button, 'font-family'), $theming-font-family); + $font-weight: if($theming-font-weight == '' or $theming-font-weight == null, map.get($default-material-button, 'font-weight'), $theming-font-weight); + $font-size: if($theming-font-size == '' or $theming-font-size == null, map.get($default-material-button, 'font-size'), $theming-font-size); + + .enigmatry-redactor-content { + button, .rx-content button { + background-color: $primary-color; + font: { + family: $font-family; + weight: $font-weight; + size: $font-size; + } + } + + .rx-toolbar-buttons .rx-button { + &.active, &:hover { + background: $primary-color; + } + } + } +} \ No newline at end of file diff --git a/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_checkboxes-generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_checkboxes-generator.scss new file mode 100644 index 00000000..e0b86774 --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_checkboxes-generator.scss @@ -0,0 +1,24 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +$redactor-checkboxes-selector: '[data-rx-type = 'todoitem'] '; + +@mixin generate-from($theme) { + $theming-accent-color: map.get($theme, 'general', 'colors', 'accent'); + + .enigmatry-redactor-content { + + $checkbox-color: if($theming-accent-color == '' or $theming-accent-color == null, mat.get-color-from-palette(mat.$primary-palette, 500), $theming-accent-color); + + .rx-editor #{$redactor-checkboxes-selector} input:checked::before { + border-color: $checkbox-color; + background-color: $checkbox-color; + } + + @if map.get($theme, 'general', 'checkboxes') { + .rx-editor #{$redactor-checkboxes-selector} input::before { + background-color: map.get($theme, 'general', 'checkboxes', 'background'); + } + } + } +} \ No newline at end of file diff --git a/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_tables-generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_tables-generator.scss new file mode 100644 index 00000000..27a2e980 --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_tables-generator.scss @@ -0,0 +1,60 @@ +@use 'sass:map'; +@use '@angular/material' as mat; +@use 'scss-foundation/src/modules/lists/row-coloring' as list; + +$redactor-th-selector: 'thead th'; +$body-typography: map.get(mat.define-typography-config(), 'body-1'); +$caption-typography: map.get(mat.define-typography-config(), 'caption'); + +@mixin generate-from($theme) { + $theming-table: map.get($theme, 'tables', 'rows', 'odd-even-background'); + $theming-table-header: map.get($theme, 'tables', 'header', 'font-size'); + $theming-fonts: map.get($theme, 'general', 'fonts'); + $body-font-family: map.get($theme, 'general', 'fonts', 'body', 'family'); + + .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(mat.get-color-from-palette(mat.$grey-palette, 100)); + @include list.odd-row-coloring(mat.get-color-from-palette(mat.$grey-palette, 50)); + } + } + + @if $theming-table-header { + th { + font-family: $body-font-family; + font-size: $theming-table-header; + } + } + } + + table, table td { + $body-size: if($theming-fonts != null, map.get($theming-fonts, 'body', 'size'), null); + + @if $body-size { + font-size: $body-size; + } + @else { + font-size: map.get($body-typography, 'font-size'); + } + + #{$redactor-th-selector} { + $header-font-size: map.get($theme, 'tables', 'header', 'font-size'); + + @if $header-font-size { + font-size: $header-font-size; + } + @else { + font-size: map.get($caption-typography, 'font-size'); + } + } + } + } +} \ No newline at end of file diff --git a/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_toolbar-generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_toolbar-generator.scss new file mode 100644 index 00000000..a7137215 --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_toolbar-generator.scss @@ -0,0 +1,12 @@ +@use 'sass:map'; + +@mixin generate-from($theme) { + $input-background: map.get($theme, 'general', 'inputs', 'background'); + $input-background: if($input-background == null, transparent, $input-background); + + .enigmatry-redactor-content { + .rx-main-container, .rx-toolbox-container { + background: $input-background; + } + } +} diff --git a/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_typography-generator.scss b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_typography-generator.scss new file mode 100644 index 00000000..b18044de --- /dev/null +++ b/libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_typography-generator.scss @@ -0,0 +1,58 @@ +/* stylelint-disable selector-max-compound-selectors, scss/at-if-no-null */ +@use 'sass:map'; +@use '@angular/material' as mat; + +$body-typography: map.get(mat.define-typography-config(), 'body-1'); +$hero-typography: map.get(mat.define-typography-config(), 'headline-1'); +$title-typography: map.get(mat.define-typography-config(), 'subtitle-1'); +$caption-typography: map.get(mat.define-typography-config(), 'caption'); + +@function get-typography($theme, $key, $default-config) { + $theming-fonts: map.get($theme, 'general', 'fonts'); + $font-config: map.get($theming-fonts, $key); + + @if $font-config != null and $font-config != '' { + @return $font-config; + } + @else { + @return $default-config; + } +} + +@function get-font-property($config, $property, $default-value) { + $value: map.get($config, $property); + + @if $value != null and $value != '' { + @return $value; + } + @else { + @return $default-value; + } +} + +@mixin generate-from($theme) { + $body-config: get-typography($theme, 'body', $body-typography); + $hero-config: get-typography($theme, 'hero-titles', $hero-typography); + $title-config: get-typography($theme, 'titles', $title-typography); + + .enigmatry-redactor-content { + .rx-editor, .rx-content, .rx-content p { + color: get-font-property($body-config, 'color', map.get($body-typography, 'color')); + font-family: get-font-property($body-config, 'family', map.get($body-typography, 'font-family')); + font-size: get-font-property($body-config, 'size', map.get($body-typography, 'font-size')); + letter-spacing: get-font-property($body-config, 'letter-spacing', map.get($body-typography, 'letter-spacing')); + } + + .rx-editor, .rx-content, .rx-content { + h1, h2, h3, h4 { + font-family: get-font-property($hero-config, 'family', map.get($hero-typography, 'font-family')); + letter-spacing: get-font-property($hero-config, 'letter-spacing', map.get($hero-typography, 'letter-spacing')); + } + + h5, h6 { + font-family: get-font-property($title-config, 'family', map.get($title-typography, 'font-family')); + letter-spacing: get-font-property($title-config, 'letter-spacing', map.get($title-typography, 'letter-spacing')); + } + } + } +} \ No newline at end of file diff --git a/libs/entry-components/styles/partials/theming.scss b/libs/entry-components/styles/partials/theming.scss index 287cef3f..ecfc6246 100644 --- a/libs/entry-components/styles/partials/theming.scss +++ b/libs/entry-components/styles/partials/theming.scss @@ -1 +1,2 @@ @use 'core/components'; +@use 'vendors/overrides'; diff --git a/libs/entry-components/styles/partials/vendors/_index.scss b/libs/entry-components/styles/partials/vendors/_index.scss new file mode 100644 index 00000000..0b386214 --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/_index.scss @@ -0,0 +1 @@ +@use 'overrides/rich-text'; \ No newline at end of file diff --git a/libs/entry-components/styles/partials/vendors/overrides/_index.scss b/libs/entry-components/styles/partials/vendors/overrides/_index.scss new file mode 100644 index 00000000..f217eb4b --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/_index.scss @@ -0,0 +1 @@ +@use 'rich-text'; \ No newline at end of file diff --git a/libs/entry-components/styles/partials/vendors/overrides/rich-text/_buttons.scss b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_buttons.scss new file mode 100644 index 00000000..89ac27ac --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_buttons.scss @@ -0,0 +1,36 @@ +@use 'scss-foundation/src/modules/display/items'; +@use '@angular/material' as mat; + +$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; + text-decoration: none; + } + + a:hover { + background-color: mat.get-color-from-palette(mat.$grey-palette, 100); + } + + button { + @include mat.elevation(4); + height: 36px; + border-radius: 4px; + color: #FFF; + + &:hover { + @include mat.elevation(8); + } + } +} diff --git a/libs/entry-components/styles/partials/vendors/overrides/rich-text/_forms.scss b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_forms.scss new file mode 100644 index 00000000..74743260 --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_forms.scss @@ -0,0 +1,22 @@ +@use '@angular/material' as mat; + +$checkbox-width: 18px; +$checkbox-height: 18px; +$border-radius: 2px; + +$redactor-todoitem-selector: '.rx-editor [data-rx-type = 'todoitem']'; + +.enigmatry-redactor-content #{$redactor-todoitem-selector} { + input { + width: $checkbox-width; + height: $checkbox-height; + } + + input::before, input:checked::before { + width: $checkbox-width; + height: $checkbox-height; + border-width: 2px; + border-radius: $border-radius; + border-color: rgb(0 0 0 / .54); + } +} diff --git a/libs/entry-components/styles/partials/vendors/overrides/rich-text/_general.scss b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_general.scss new file mode 100644 index 00000000..29d68ae4 --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_general.scss @@ -0,0 +1,12 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +.enigmatry-redactor-content { + .rx-button-icon svg { + fill: rgb(0 0 0 / .54); + } + + .rx-main-container { + border-color: rgb(0 0 0 / .38); + } +} \ No newline at end of file diff --git a/libs/entry-components/styles/partials/vendors/overrides/rich-text/_index.scss b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_index.scss new file mode 100644 index 00000000..62769681 --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_index.scss @@ -0,0 +1,4 @@ +@use 'general'; +@use 'tables'; +@use 'buttons'; +@use 'forms'; \ No newline at end of file diff --git a/libs/entry-components/styles/partials/vendors/overrides/rich-text/_tables.scss b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_tables.scss new file mode 100644 index 00000000..67bbf3a6 --- /dev/null +++ b/libs/entry-components/styles/partials/vendors/overrides/rich-text/_tables.scss @@ -0,0 +1,31 @@ +/* stylelint-disable selector-max-compound-selectors, selector-max-type, selector-max-combinators */ +.enigmatry-redactor-content table { + th { + font-weight: 500; + } + + p { + margin: 0; + } + + td { + border: 1px solid rgb(0 0 0 / .12); + } + + tr:first-child { + th, td { + border-top: none; + } + } + + tr:last-child td { + border-bottom: none; + } + + th, td { + border: { + right: none; + left: none; + } + } +}