@talrace/ngx-noder 0.0.6 → 0.0.8

package/src/assets/fonts/nc-iconfont.css

@@ -5,16 +5,14 @@
 @font-face {
     font-family: 'nc-iconfont';
     src: url('nc-iconfont.eot');
-    src: url('nc-iconfont.eot') format('embedded-opentype'),
-        url('nc-iconfont.ttf') format('truetype'),
-        url('nc-iconfont.woff') format('woff'),
-        url('nc-iconfont.svg') format('svg');
+    src: url('nc-iconfont.eot') format('embedded-opentype'), url('nc-iconfont.ttf') format('truetype'),
+        url('nc-iconfont.woff') format('woff'), url('nc-iconfont.svg') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
 }
 
-.nc-icon {
+.noder-icon {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'nc-iconfont', sans-serif !important;
     speak: never;
@@ -30,304 +28,312 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-table-rows:before {
+    content: '\e966';
+}
+.icon-table-columns:before {
+    content: '\e965';
+}
+.icon-format-combined:before {
+    content: '\e964';
+}
 .icon-person:before {
-  content: "\e960";
+    content: '\e960';
 }
 .icon-upload:before {
-  content: "\e961";
+    content: '\e961';
 }
 .icon-zoom-in:before {
-  content: "\e962";
+    content: '\e962';
 }
 .icon-zoom-out:before {
-  content: "\e963";
+    content: '\e963';
 }
 .icon-refresh:before {
-  content: "\e954";
+    content: '\e954';
 }
 .icon-password:before {
-  content: "\e955";
+    content: '\e955';
 }
 .icon-mail:before {
-  content: "\e957";
+    content: '\e957';
 }
 .icon-logout:before {
-  content: "\e959";
+    content: '\e959';
 }
 .icon-arrow-up:before {
-  content: "\e95a";
+    content: '\e95a';
 }
 .icon-arrow-onright:before {
-  content: "\e95b";
+    content: '\e95b';
 }
 .icon-arrow-onleft:before {
-  content: "\e95c";
+    content: '\e95c';
 }
 .icon-arrow-forward:before {
-  content: "\e95d";
+    content: '\e95d';
 }
 .icon-arrow-down:before {
-  content: "\e95e";
+    content: '\e95e';
 }
 .icon-account-circle:before {
-  content: "\e95f";
+    content: '\e95f';
 }
 .icon-text:before {
-  content: "\e958";
+    content: '\e958';
 }
 .icon-font-color0:before {
-  content: "\e956";
+    content: '\e956';
 }
 .icon-edit:before {
-  content: "\e953";
+    content: '\e953';
 }
 .icon-menu-circle:before {
-  content: "\e952";
+    content: '\e952';
 }
 .icon-fill-color:before {
-  content: "\e951";
+    content: '\e951';
 }
 .icon-edit-menu:before {
-  content: "\e950";
+    content: '\e950';
 }
 .icon-upload-file:before {
-  content: "\e94f";
+    content: '\e94f';
 }
 .icon-info:before {
-  content: "\e94e";
+    content: '\e94e';
 }
 .icon-arrow-south:before {
-  content: "\e94b";
+    content: '\e94b';
 }
 .icon-arrow-back:before {
-  content: "\e94c";
+    content: '\e94c';
 }
 .icon-download:before {
-  content: "\e94d";
+    content: '\e94d';
 }
 .icon-folder-move:before {
-  content: "\e94a";
+    content: '\e94a';
 }
 .icon-new-folder:before {
-  content: "\e949";
+    content: '\e949';
 }
 .icon-add-column:before {
-  content: "\e900";
+    content: '\e900';
 }
 .icon-add-new:before {
-  content: "\e901";
+    content: '\e901';
 }
 .icon-add:before {
-  content: "\e902";
+    content: '\e902';
 }
 .icon-arrow-dropdown:before {
-  content: "\e903";
+    content: '\e903';
 }
 .icon-arrow-dropup:before {
-  content: "\e904";
+    content: '\e904';
 }
 .icon-arrow-left:before {
-  content: "\e905";
+    content: '\e905';
 }
 .icon-arrow-north:before {
-  content: "\e906";
+    content: '\e906';
 }
 .icon-arrow-right:before {
-  content: "\e907";
+    content: '\e907';
 }
 .icon-back:before {
-  content: "\e908";
+    content: '\e908';
 }
 .icon-bottom:before {
-  content: "\e909";
+    content: '\e909';
 }
 .icon-cancel-nofill:before {
-  content: "\e90a";
+    content: '\e90a';
 }
 .icon-cancel-thin:before {
-  content: "\e90b";
+    content: '\e90b';
 }
 .icon-cancel:before {
-  content: "\e90c";
+    content: '\e90c';
 }
 .icon-check-circle:before {
-  content: "\e90d";
+    content: '\e90d';
 }
 .icon-content-cut:before {
-  content: "\e90e";
+    content: '\e90e';
 }
 .icon-content-paste:before {
-  content: "\e90f";
+    content: '\e90f';
 }
 .icon-datepicker:before {
-  content: "\e910";
+    content: '\e910';
 }
 .icon-delete:before {
-  content: "\e911";
+    content: '\e911';
 }
 .icon-done-thin:before {
-  content: "\e912";
+    content: '\e912';
 }
 .icon-draft:before {
-  content: "\e913";
+    content: '\e913';
 }
 .icon-edit-mode:before {
-  content: "\e914";
+    content: '\e914';
 }
 .icon-error:before {
-  content: "\e915";
+    content: '\e915';
 }
 .icon-file-copy:before {
-  content: "\e916";
+    content: '\e916';
 }
 .icon-file-library:before {
-  content: "\e917";
+    content: '\e917';
 }
 .icon-file-related:before {
-  content: "\e918";
+    content: '\e918';
 }
 .icon-file:before {
-  content: "\e919";
+    content: '\e919';
 }
 .icon-fill-done:before {
-  content: "\e91a";
+    content: '\e91a';
 }
 .icon-fill-mode:before {
-  content: "\e91b";
+    content: '\e91b';
 }
 .icon-fill:before {
-  content: "\e91c";
+    content: '\e91c';
 }
 .icon-folder-library:before {
-  content: "\e91d";
+    content: '\e91d';
 }
 .icon-folder-upload:before {
-  content: "\e91e";
+    content: '\e91e';
 }
 .icon-format-align:before {
-  content: "\e91f";
+    content: '\e91f';
 }
 .icon-format-aligncenter:before {
-  content: "\e920";
+    content: '\e920';
 }
 .icon-format-alignleft:before {
-  content: "\e921";
+    content: '\e921';
 }
 .icon-format-alignright:before {
-  content: "\e922";
+    content: '\e922';
 }
 .icon-format-bold:before {
-  content: "\e923";
+    content: '\e923';
 }
 .icon-format-bulleted:before {
-  content: "\e924";
+    content: '\e924';
 }
 .icon-format-colortext:before {
-  content: "\e925";
+    content: '\e925';
 }
 .icon-format-italic:before {
-  content: "\e926";
+    content: '\e926';
 }
 .icon-format-numbered:before {
-  content: "\e927";
+    content: '\e927';
 }
 .icon-format-underlined:before {
-  content: "\e928";
+    content: '\e928';
 }
 .icon-header:before {
-  content: "\e929";
+    content: '\e929';
 }
 .icon-headers-footers:before {
-  content: "\e92a";
+    content: '\e92a';
 }
 .icon-image:before {
-  content: "\e92b";
+    content: '\e92b';
 }
 .icon-input:before {
-  content: "\e92c";
+    content: '\e92c';
 }
 .icon-insert:before {
-  content: "\e92d";
+    content: '\e92d';
 }
 .icon-layout:before {
-  content: "\e92e";
+    content: '\e92e';
 }
 .icon-library-tab:before {
-  content: "\e92f";
+    content: '\e92f';
 }
 .icon-link-highlighter:before {
-  content: "\e930";
+    content: '\e930';
 }
 .icon-link-off:before {
-  content: "\e931";
+    content: '\e931';
 }
 .icon-link-on:before {
-  content: "\e932";
+    content: '\e932';
 }
 .icon-log-tab:before {
-  content: "\e933";
+    content: '\e933';
 }
 .icon-more-vert:before {
-  content: "\e934";
+    content: '\e934';
 }
 .icon-open-from:before {
-  content: "\e935";
+    content: '\e935';
 }
 .icon-page-break:before {
-  content: "\e936";
+    content: '\e936';
 }
 .icon-print:before {
-  content: "\e937";
+    content: '\e937';
 }
 .icon-processing-tab:before {
-  content: "\e938";
+    content: '\e938';
 }
 .icon-redo-material:before {
-  content: "\e939";
+    content: '\e939';
 }
 .icon-redo:before {
-  content: "\e93a";
+    content: '\e93a';
 }
 .icon-remove:before {
-  content: "\e93b";
+    content: '\e93b';
 }
 .icon-rename:before {
-  content: "\e93c";
+    content: '\e93c';
 }
 .icon-sandwich:before {
-  content: "\e93d";
+    content: '\e93d';
 }
 .icon-save:before {
-  content: "\e93e";
+    content: '\e93e';
 }
 .icon-search:before {
-  content: "\e93f";
+    content: '\e93f';
 }
 .icon-select-all:before {
-  content: "\e940";
+    content: '\e940';
 }
 .icon-signature:before {
-  content: "\e941";
+    content: '\e941';
 }
 .icon-stop:before {
-  content: "\e942";
+    content: '\e942';
 }
 .icon-table:before {
-  content: "\e943";
+    content: '\e943';
 }
 .icon-undo-material:before {
-  content: "\e944";
+    content: '\e944';
 }
 .icon-undo:before {
-  content: "\e945";
+    content: '\e945';
 }
 .icon-view:before {
-  content: "\e946";
+    content: '\e946';
 }
 .icon-visibility-off:before {
-  content: "\e947";
+    content: '\e947';
 }
 .icon-visibility-on:before {
-  content: "\e948";
+    content: '\e948';
 }
-

package/src/assets/fonts/nc-iconfont.svg

@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="NC-iconfont" horiz-adv-x="1024">
+<font id="NC-iconfont-v41" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@@ -107,4 +107,7 @@
 <glyph unicode="&#xe961;" glyph-name="upload" horiz-adv-x="983" d="M491.52 314.122c-11.309 0-20.48 9.171-20.48 20.48v333.826l-80.738-80.738c-8.116-8.116-21.291-8.063-29.341 0.118v0c-7.959 8.088-7.907 21.081 0.118 29.105l130.442 130.442 130.441-130.442c8.024-8.024 8.077-21.017 0.119-29.105v0c-8.053-8.181-21.225-8.235-29.34-0.118l-80.74 80.738v-333.826c0-11.309-9.171-20.48-20.48-20.48v0zM270.966 173.916c-18.852 0-34.592 6.312-47.222 18.944-12.629 12.628-18.944 28.369-18.944 47.219v78.77c0 11.313 9.169 20.48 20.48 20.48v0c11.311 0 20.48-9.167 20.48-20.48v-78.77c0-6.3 2.626-12.075 7.877-17.326s11.028-7.877 17.329-7.877h441.108c6.304 0 12.079 2.626 17.33 7.877s7.877 11.026 7.877 17.326v78.77c0 11.313 9.171 20.48 20.48 20.48v0c11.309 0 20.48-9.167 20.48-20.48v-78.77c0-18.85-6.316-34.591-18.944-47.219-12.628-12.632-28.369-18.944-47.223-18.944h-441.108z" />
 <glyph unicode="&#xe962;" glyph-name="zoom-in" d="M840.933 139.571c-8.004-8.004-20.984-8.004-28.987 0l-241.979 241.979c-20.48-17.433-44.032-30.929-70.656-40.489-26.624-9.556-53.379-14.336-80.265-14.336-65.605 0-121.128 22.712-166.569 68.129-45.443 45.416-68.164 100.909-68.164 166.477s22.709 121.104 68.125 166.607c45.417 45.502 100.91 68.254 166.48 68.254 65.569 0 121.102-22.721 166.605-68.162s68.256-100.965 68.256-166.57c0-28.46-5.042-56.005-15.127-82.629-10.080-26.624-23.314-49.39-39.698-68.293l241.979-241.979c8.004-8.004 8.004-20.984 0-28.987v0zM419.045 367.686c54.35 0 100.233 18.711 137.65 56.123 37.413 37.417 56.123 83.3 56.123 137.651s-18.711 100.234-56.123 137.649c-37.417 37.416-83.3 56.123-137.65 56.123-54.351 0-100.234-18.708-137.649-56.123s-56.123-83.299-56.123-137.649c0-54.351 18.708-100.234 56.123-137.651 37.415-37.413 83.298-56.123 137.649-56.123zM398.565 463.786v77.193h-77.193v40.961h77.193v77.194h40.96v-77.194h77.193v-40.961h-77.193v-77.193h-40.96z" />
 <glyph unicode="&#xe963;" glyph-name="zoom-out" d="M840.933 139.571c-8.004-8.004-20.984-8.004-28.987 0l-241.979 241.979c-20.48-17.433-44.032-30.929-70.656-40.489-26.624-9.556-53.379-14.336-80.265-14.336-65.605 0-121.128 22.712-166.569 68.129-45.443 45.416-68.164 100.909-68.164 166.477s22.709 121.104 68.125 166.607c45.417 45.502 100.91 68.254 166.48 68.254 65.569 0 121.102-22.721 166.605-68.162s68.256-100.965 68.256-166.57c0-28.46-5.042-56.005-15.127-82.629-10.080-26.624-23.314-49.39-39.698-68.293l241.979-241.979c8.004-8.004 8.004-20.984 0-28.987v0zM419.045 367.686c54.35 0 100.233 18.711 137.65 56.123 37.413 37.417 56.123 83.3 56.123 137.651s-18.711 100.234-56.123 137.649c-37.417 37.416-83.3 56.123-137.65 56.123-54.351 0-100.234-18.708-137.649-56.123s-56.123-83.299-56.123-137.649c0-54.351 18.708-100.234 56.123-137.651 37.415-37.413 83.298-56.123 137.649-56.123zM326.098 540.979v40.961h185.894v-40.961h-185.894z" />
+<glyph unicode="&#xe964;" glyph-name="format-combined" horiz-adv-x="1067" d="M428.958 479.181h149.056c23.134-0.823 43.345-5.884 60.634-15.181 17.284-9.024 30.050-22.289 38.293-39.795 8.243-17.229 10.505-38.289 6.78-63.181-4.254-27.076-13.961-50.048-29.116-68.919-14.895-18.598-33.378-32.687-55.45-42.257-22.071-9.574-46.14-14.498-72.201-14.771h-139.138l41.141 244.105zM436.147 521.847l37.751 223.999h121.267c23.138-0.547 44.011-4.376 62.626-11.487 18.884-6.838 33.109-18.188 42.684-34.051 9.839-15.863 12.634-37.196 8.38-64-3.989-26.803-13.564-48.684-28.723-65.641-14.891-16.684-33.242-28.992-55.049-36.923-21.542-7.933-44.544-11.896-69.009-11.896h-119.927zM642.035 503.010c13.026 4.322 25.459 9.643 37.299 15.966 21.274 11.486 38.827 26.665 52.655 45.537 13.828 19.145 22.34 42.667 25.532 70.564 3.191 27.35 1.062 50.598-6.383 69.743-7.445 19.419-18.748 35.282-33.907 47.59s-33.242 21.333-54.251 27.077c-21.009 6.017-43.349 9.299-67.017 9.846h-163.153l-100.522-597.333h193.868c34.304 0 66.219 6.426 95.735 19.281 29.786 13.129 54.383 32.273 73.796 57.438 19.682 25.161 31.514 56.205 35.503 93.129 2.658 24.341 0.132 46.63-7.578 66.871-7.714 20.51-19.947 37.606-36.702 51.281-12.855 10.662-27.814 18.334-44.877 23.010zM310.974 106.667h469.297c11.785 0 21.333-9.553 21.333-21.333s-9.549-21.333-21.333-21.333h-469.297c-11.782 0-21.333 9.553-21.333 21.333s9.551 21.333 21.333 21.333z" />
+<glyph unicode="&#xe965;" glyph-name="table-columns" d="M196.923 192h173.129v512h-173.129c-7.658 0-13.949-2.461-18.871-7.384s-7.385-11.214-7.385-18.871v-459.487c0-7.659 2.461-13.948 7.385-18.871s11.213-7.386 18.871-7.386zM412.718 192h198.563v512h-198.563v-512zM653.948 192h173.129c7.659 0 13.948 2.462 18.871 7.386s7.386 11.213 7.386 18.871v459.487c0 7.658-2.462 13.948-7.386 18.871s-11.213 7.384-18.871 7.384h-173.129v-512zM196.923 149.333c-19.637 0-36.034 6.579-49.19 19.733s-19.733 29.551-19.733 49.19v459.487c0 19.637 6.578 36.034 19.733 49.189s29.552 19.733 49.19 19.733h630.153c19.639 0 36.036-6.578 49.19-19.733s19.733-29.552 19.733-49.189v-459.487c0-19.639-6.579-36.036-19.733-49.19s-29.551-19.733-49.19-19.733h-630.153z" />
+<glyph unicode="&#xe966;" glyph-name="table-rows" d="M810.667 175.59v130.462h-597.333v-130.462c0-7.659 2.461-13.948 7.385-18.871s11.213-7.386 18.871-7.386h544.82c7.659 0 13.948 2.462 18.871 7.386s7.386 11.213 7.386 18.871zM810.667 348.719v198.563h-597.333v-198.563h597.333zM810.667 589.949v130.462c0 7.658-2.462 13.948-7.386 18.871s-11.213 7.384-18.871 7.384h-544.82c-7.658 0-13.949-2.461-18.871-7.384s-7.385-11.214-7.385-18.871v-130.462h597.333zM239.59 106.667c-19.637 0-36.034 6.579-49.19 19.733s-19.733 29.551-19.733 49.19v544.82c0 19.637 6.578 36.034 19.733 49.189s29.552 19.733 49.19 19.733h544.82c19.639 0 36.036-6.578 49.19-19.733s19.733-29.552 19.733-49.189v-544.82c0-19.639-6.579-36.036-19.733-49.19s-29.551-19.733-49.19-19.733h-544.82z" />
 </font></defs></svg>

package/src/lib/{+shared → apart-components}/add-link-dialog/_add-link-dialog.theme.scss

@@ -5,7 +5,7 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    app-add-link-dialog {
+    app-nod-add-link-dialog {
         .mat-mdc-dialog-actions .apply-btn {
             color: mat.get-color-from-palette($foreground, noder-button-raised-text);
 

package/src/lib/apart-components/add-link-mobile/_add-link-mobile.theme.scss

@@ -0,0 +1,25 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin add-link-mobile-component($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    app-nod-add-link-mobile {
+        .title {
+            color: mat.get-color-from-palette($foreground, noder-modal-text);
+        }
+
+        .mdc-fab {
+            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
+
+            &:disabled {
+                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+            }
+
+            &:enabled {
+                background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+            }
+        }
+    }
+}

package/src/lib/{+shared → apart-components}/confirm-dialog/_theme.scss

@@ -5,7 +5,7 @@
     $background: map.get($theme, background);
     $foreground: map.get($theme, foreground);
 
-    app-confirm-dialog {
+    app-nod-confirm-dialog {
         .title {
             color: mat.get-color-from-palette($foreground, noder-base);
             border-bottom-color: mat.get-color-from-palette($foreground, noder-divider);

package/src/lib/{+shared → apart-components}/editor-title/_editor-title.theme.scss

@@ -5,7 +5,7 @@
     $background: map.get($theme, background);
     $foreground: map.get($theme, foreground);
 
-    app-editor-title {
+    app-nod-editor-title {
         background-color: mat.get-color-from-palette($background, noder-editor-header);
 
         .file-name {

package/src/lib/apart-components/editor-title-mobile/_editor-title-mobile.theme.scss

@@ -0,0 +1,42 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin editor-title-mobile-component-theme($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    .noder-editor-title-mobile-menu {
+        background-color: transparent;
+        box-shadow: none !important;
+
+        .mat-mdc-icon-button {
+            background-color: mat.get-color-from-palette($background, noder-editor-header);
+            color: mat.get-color-from-palette($foreground, noder-button-header);
+
+            .mat-mdc-button-persistent-ripple::before {
+                background-color: mat.get-color-from-palette($background, noder-editor-header);
+            }
+        }
+    }
+
+    app-nod-editor-title-mobile {
+        background-color: mat.get-color-from-palette($background, noder-editor-header);
+
+        .file-name {
+            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+        }
+
+        .editor-mode .mat-mdc-icon-button {
+            background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+            color: mat.get-color-from-palette($foreground, noder-button-header-selected);
+
+            .mat-mdc-button-persistent-ripple::before {
+                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+            }
+        }
+
+        .circle {
+            background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/_editor-toolbar.theme.scss

@@ -0,0 +1,27 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin editor-toolbar-component($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    app-nod-editor-toolbar {
+        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+    }
+
+    app-nod-editor-mobile-toolbar {
+        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+
+        .mat-icon {
+            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        .separator {
+            border-color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        button:hover {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/_theme.scss

@@ -0,0 +1,25 @@
+@import './components/buttons/color-picker/color-picker.theme';
+@import './components/buttons/font-size/font-size.theme';
+@import './components/buttons/font-style/font-style.theme';
+@import './components/buttons/font/font.theme';
+@import './components/buttons/format/format.theme';
+@import './components/buttons/numbering/numbering.theme';
+@import './components/buttons/undo-redo/undo-redo.theme';
+@import './components/menu-dropdowns-mobile/menu-dropdowns-mobile.theme';
+@import './components/menu-dropdowns/menu-dropdowns.theme';
+@import './components/toolbar-actions/toolbar-actions.theme';
+@import './editor-toolbar.theme';
+
+@mixin editor-toolbar-theme($theme) {
+    @include color-picker-component($theme);
+    @include editor-toolbar-component($theme);
+    @include font-component($theme);
+    @include font-size-component($theme);
+    @include font-style-component($theme);
+    @include format-component($theme);
+    @include menu-dropdowns-component($theme);
+    @include menu-dropdowns-mobile-component($theme);
+    @include numbering-component($theme);
+    @include toolbar-actions-component($theme);
+    @include undo-redo-component($theme);
+}

package/src/lib/apart-components/editor-toolbar/components/buttons/color-picker/_color-picker.theme.scss

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin color-picker-component($theme) {
+    $foreground: map.get($theme, foreground);
+
+    app-nod-color-picker {
+        .color-text {
+            color: mat.get-color-from-palette($foreground, noder-button-text);
+        }
+    }
+}

package/src/lib/{+shared/editor-toolbar → apart-components/editor-toolbar/components/buttons}/font/_font.theme.scss

@@ -4,7 +4,7 @@
 @mixin font-component($theme) {
     $foreground: map.get($theme, foreground);
 
-    app-font {
+    app-nod-font {
         .mat-mdc-button:not(:disabled) {
             color: mat.get-color-from-palette($foreground, noder-button-text);
         }

package/src/lib/{+shared/editor-toolbar → apart-components/editor-toolbar/components/buttons}/font-size/_font-size.theme.scss

@@ -5,7 +5,7 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    app-font-size {
+    app-nod-font-size {
         input {
             background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
             color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);

package/src/lib/{+shared/editor-toolbar → apart-components/editor-toolbar/components/buttons}/font-style/_font-style.theme.scss

@@ -5,7 +5,7 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    app-font-style {
+    app-nod-font-style {
         mat-button-toggle {
             background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
         }