@talrace/ngx-noder 0.0.18 → 0.0.19

package/lib/apart-components/editor-toolbar/components/base-toolbar.component.d.ts

@@ -45,5 +45,5 @@ export declare abstract class BaseToolbarComponent extends DestroyComponent {
     private historyInfoSubscription;
     private stylesSubscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseToolbarComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseToolbarComponent, never, never, {}, { "print": "print"; "redo": "redo"; "undo": "undo"; "createElement": "createElement"; "changeTextStyle": "changeTextStyle"; "changeParagraphStyle": "changeParagraphStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertImage": "insertImage"; "insertLink": "insertLink"; "insertTable": "insertTable"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseToolbarComponent, never, never, {}, { "print": "print"; "redo": "redo"; "undo": "undo"; "createElement": "createElement"; "changeTextStyle": "changeTextStyle"; "changeParagraphStyle": "changeParagraphStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertImage": "insertImage"; "insertLink": "insertLink"; "insertTable": "insertTable"; }, never, never, true, never>;
 }

package/lib/editor/components/external-element/external.component.d.ts

@@ -13,5 +13,5 @@ export declare abstract class ExternalComponent extends BaseNoderComponent {
     changeElementHeight(height: number): void;
     changeElementWidth(width: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ExternalComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ExternalComponent, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ExternalComponent, never, never, {}, {}, never, never, true, never>;
 }

package/lib/editor/components/shared/abstract/base.component.d.ts

@@ -24,5 +24,5 @@ export declare abstract class BaseNoderComponent extends DestroyComponent {
     blur(): void;
     receiveStyle(_textStyle: TextStyleModel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseNoderComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseNoderComponent, never, never, { "content": { "alias": "content"; "required": false; }; "sessionId": { "alias": "sessionId"; "required": false; }; "contentWidth": { "alias": "contentWidth"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseNoderComponent, never, never, { "content": { "alias": "content"; "required": false; }; "sessionId": { "alias": "sessionId"; "required": false; }; "contentWidth": { "alias": "contentWidth"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/editor/components/shared/abstract/destroy.component.d.ts

@@ -5,5 +5,5 @@ export declare abstract class DestroyComponent implements OnDestroy {
     destroy$: Subject<boolean>;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DestroyComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DestroyComponent, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DestroyComponent, never, never, {}, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talrace/ngx-noder",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^17.3.12",
@@ -29,8 +29,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/talrace-ngx-noder.mjs",
-      "esm": "./esm2022/talrace-ngx-noder.mjs",
       "default": "./fesm2022/talrace-ngx-noder.mjs"
     }
   }

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

@@ -2,19 +2,16 @@
 @use 'sass:map';
 
 @mixin add-link-dialog-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-add-link-dialog {
         .mat-mdc-dialog-actions .apply-btn {
-            color: mat.get-color-from-palette($foreground, noder-button-raised-text);
+            color: map.get($theme, foreground-palette, noder-button-raised-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-enabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-enabled);
             }
         }
     }

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

@@ -2,23 +2,20 @@
 @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);
+            color: map.get($theme, foreground-palette, noder-modal-text);
         }
 
         .mdc-fab {
-            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
+            color: map.get($theme, foreground-palette, noder-button-fab-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+                background-color: map.get($theme, background-palette, noder-button-sidenav-fab);
             }
         }
     }

package/src/lib/apart-components/confirm-dialog/_theme.scss

@@ -2,28 +2,25 @@
 @use 'sass:map';
 
 @mixin confirm-dialog-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     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);
+            color: map.get($theme, foreground-palette, noder-base);
+            border-bottom-color: map.get($theme, foreground-palette, noder-divider);
         }
 
         .content {
-            color: mat.get-color-from-palette($foreground, noder-text);
+            color: map.get($theme, foreground-palette, noder-text);
         }
 
         .actions .delete-btn {
-            color: mat.get-color-from-palette($foreground, noder-button-raised-text);
+            color: map.get($theme, foreground-palette, noder-button-raised-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-enabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-enabled);
             }
         }
     }

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

@@ -2,26 +2,23 @@
 @use 'sass:map';
 
 @mixin editor-title-component-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-editor-title {
-        background-color: mat.get-color-from-palette($background, noder-editor-header);
+        background-color: map.get($theme, background-palette, noder-editor-header);
 
         .file-name {
-            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+            color: map.get($theme, foreground-palette, noder-editor-header-text);
         }
 
         .editor-mode .mat-mdc-icon-button {
-            color: mat.get-color-from-palette($foreground, noder-button-header);
+            color: map.get($theme, foreground-palette, noder-button-header);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
             }
 
             &.selected-mode {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
-                color: mat.get-color-from-palette($foreground, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
+                color: map.get($theme, foreground-palette, noder-button-header-selected);
             }
         }
     }

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

@@ -2,41 +2,38 @@
 @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);
+            background-color: map.get($theme, background-palette, noder-editor-header);
+            color: map.get($theme, foreground-palette, noder-button-header);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-editor-header);
+                background-color: map.get($theme, background-palette, noder-editor-header);
             }
         }
     }
 
     app-nod-editor-title-mobile {
-        background-color: mat.get-color-from-palette($background, noder-editor-header);
+        background-color: map.get($theme, background-palette, noder-editor-header);
 
         .file-name {
-            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+            color: map.get($theme, foreground-palette, 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);
+            background-color: map.get($theme, background-palette, noder-button-header-selected);
+            color: map.get($theme, foreground-palette, noder-button-header-selected);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
             }
         }
 
         .circle {
-            background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+            background-color: map.get($theme, background-palette, noder-button-header-selected);
         }
     }
 }

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

@@ -2,26 +2,23 @@
 @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);
+        background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
     }
 
     app-nod-editor-mobile-toolbar {
-        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+        background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
 
         .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         .separator {
-            border-color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            border-color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         button:hover {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-hover);
         }
     }
 }

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

@@ -2,11 +2,9 @@
 @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);
+            color: map.get($theme, foreground-palette, noder-button-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font/_font.theme.scss

@@ -2,11 +2,9 @@
 @use 'sass:map';
 
 @mixin font-component($theme) {
-    $foreground: map.get($theme, foreground);
-
     app-nod-font {
         .mat-mdc-button:not(:disabled) {
-            color: mat.get-color-from-palette($foreground, noder-button-text);
+            color: map.get($theme, foreground-palette, noder-button-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font-size/_font-size.theme.scss

@@ -2,13 +2,10 @@
 @use 'sass:map';
 
 @mixin font-size-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     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);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font-style/_font-style.theme.scss

@@ -2,20 +2,17 @@
 @use 'sass:map';
 
 @mixin font-style-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-font-style {
         mat-button-toggle {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
         }
 
         .mat-button-toggle-checked mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-button-selected);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-button-selected);
         }
 
         .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-checked);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-checked);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/format/_format.theme.scss

@@ -2,20 +2,17 @@
 @use 'sass:map';
 
 @mixin format-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-format {
         mat-button-toggle {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
         }
 
         .mat-button-toggle-checked mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-button-selected);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-button-selected);
         }
 
         .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-checked);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-checked);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/numbering/_numbering.theme.scss

@@ -3,68 +3,65 @@
 @use 'sass:map';
 
 @mixin numbering-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     .dropdown-numbering-overlay,
     app-nod-numbering {
         mat-button-toggle {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
         }
 
         .mat-button-toggle-checked mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-button-selected);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-button-selected);
         }
 
         .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-checked);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-checked);
         }
 
         .list-marker,
         .list-number {
-            border-color: mat.get-color-from-palette($background, noder-numbering-border);
+            border-color: map.get($theme, background-palette, noder-numbering-border);
 
             mat-icon {
-                stroke: mat.get-color-from-palette($foreground, noder-numbering-line);
+                stroke: map.get($theme, foreground-palette, noder-numbering-line);
 
                 .line {
-                    fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+                    fill: map.get($theme, foreground-palette, noder-numbering-line);
                 }
 
                 .bullet {
-                    stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                    stroke: map.get($theme, foreground-palette, noder-numbering-bullet);
                 }
 
                 .filled {
-                    fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                    fill: map.get($theme, foreground-palette, noder-numbering-bullet);
                 }
 
                 path {
-                    fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
-                    stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                    fill: map.get($theme, foreground-palette, noder-numbering-bullet);
+                    stroke: map.get($theme, foreground-palette, noder-numbering-bullet);
                 }
 
                 rect:last-child {
-                    stroke: mat.get-color-from-palette($background, noder-numbering-border);
+                    stroke: map.get($theme, background-palette, noder-numbering-border);
                 }
             }
 
             .mat-icon {
-                background-color: mat.get-color-from-palette($background, noder-numbering);
+                background-color: map.get($theme, background-palette, noder-numbering);
 
                 &:hover {
-                    background-color: mat.get-color-from-palette($background, noder-numbering-hover);
+                    background-color: map.get($theme, background-palette, noder-numbering-hover);
                 }
             }
 
             .selected,
             .selected:hover {
-                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
+                border-color: map.get($theme, background-palette, noder-selected-numbering-border);
             }
         }
 
         .list-number rect:not(:last-child) {
-            fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+            fill: map.get($theme, foreground-palette, noder-numbering-line);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/undo-redo/_undo-redo.theme.scss

@@ -2,15 +2,13 @@
 @use 'sass:map';
 
 @mixin undo-redo-component($theme) {
-    $foreground: map.get($theme, foreground);
-
     app-nod-undo-redo {
         .mat-mdc-button:not(:disabled) .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         .mat-mdc-button:disabled .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text-disabled);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text-disabled);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/menu-dropdowns/_menu-dropdowns.theme.scss

@@ -2,25 +2,22 @@
 @use 'sass:map';
 
 @mixin menu-dropdowns-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-menu-dropdowns {
         input {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         button:hover {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-hover);
         }
 
         .mat-mdc-button:not(:disabled) {
-            color: mat.get-color-from-palette($foreground, noder-button-text);
+            color: map.get($theme, foreground-palette, noder-button-text);
         }
     }
 
     .noder-divider {
-        border-color: mat.get-color-from-palette($foreground, noder-divider);
+        border-color: map.get($theme, foreground-palette, noder-divider);
     }
 }

package/src/lib/apart-components/editor-toolbar/components/menu-dropdowns-mobile/_menu-dropdowns-mobile.theme.scss

@@ -2,32 +2,29 @@
 @use 'sass:map';
 
 @mixin menu-dropdowns-mobile-component($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-menu-dropdowns-mobile {
         .mat-expansion-panel {
-            background-color: mat.get-color-from-palette($background, noder-editor-mat-drawer);
-            border-bottom-color: mat.get-color-from-palette($foreground, noder-divider);
+            background-color: map.get($theme, background-palette, noder-editor-mat-drawer);
+            border-bottom-color: map.get($theme, foreground-palette, noder-divider);
         }
 
         .mat-expansion-panel-header-title {
-            color: mat.get-color-from-palette($foreground, noder-base);
+            color: map.get($theme, foreground-palette, noder-base);
         }
 
         .expansion-panel-content {
             .mat-mdc-menu-item {
-                color: mat.get-color-from-palette($foreground, noder-base);
+                color: map.get($theme, foreground-palette, noder-base);
             }
 
             .mat-icon {
-                color: mat.get-color-from-palette($foreground, noder-base);
+                color: map.get($theme, foreground-palette, noder-base);
             }
         }
 
         .composition-icon,
         .mat-expansion-panel-header .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-base);
+            color: map.get($theme, foreground-palette, noder-base);
         }
     }
 }

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

@@ -2,21 +2,18 @@
 @use 'sass:map';
 
 @mixin toolbar-actions-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-toolbar-actions {
         .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         .separator {
-            border-color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            border-color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         .active-button,
         button:hover {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-hover);
         }
     }
 }

package/src/lib/apart-components/insert-table/_insert-table.theme.scss

@@ -2,24 +2,21 @@
 @use 'sass:map';
 
 @mixin insert-table-component($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-insert-table {
-        background-color: mat.get-color-from-palette($background, noder-page-background);
+        background-color: map.get($theme, background-palette, noder-page-background);
 
         .cell {
-            border: 1px solid mat.get-color-from-palette($background, noder-insert-table-cell-border);
-            background-color: mat.get-color-from-palette($background, noder-insert-table-cell);
+            border: 1px solid map.get($theme, background-palette, noder-insert-table-cell-border);
+            background-color: map.get($theme, background-palette, noder-insert-table-cell);
 
             &.highlighted {
-                border-color: mat.get-color-from-palette($background, noder-insert-table-cell-border-highlighted);
-                background-color: mat.get-color-from-palette($background, noder-insert-table-cell-highlighted);
+                border-color: map.get($theme, background-palette, noder-insert-table-cell-border-highlighted);
+                background-color: map.get($theme, background-palette, noder-insert-table-cell-highlighted);
             }
         }
 
         .table-size {
-            color: mat.get-color-from-palette($foreground, noder-insert-table-size-label);
+            color: map.get($theme, foreground-palette, noder-insert-table-size-label);
         }
     }
 }