@talrace/ngx-noder 0.0.17 → 0.0.19

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);
         }
     }
 }

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

@@ -2,52 +2,49 @@
 @use 'sass:map';
 
 @mixin insert-table-mobile-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-insert-table-mobile {
         .cell {
-            border-color: mat.get-color-from-palette($background, noder-insert-table-cell-border);
-            background-color: mat.get-color-from-palette($background, noder-insert-table-cell);
+            border-color: 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);
             }
         }
 
         .mat-mdc-form-field .mdc-fab {
-            color: mat.get-color-from-palette($foreground, noder-base);
+            color: map.get($theme, foreground-palette, noder-base);
             background-color: transparent;
             box-shadow: none;
         }
 
         .separator {
-            border-color: rgba(mat.get-color-from-palette($foreground, noder-base), 0.24);
+            border-color: rgba(map.get($theme, foreground-palette, noder-base), 0.24);
         }
 
         .quick-select-title {
-            color: rgba(mat.get-color-from-palette($foreground, noder-base), 0.56);
+            color: rgba(map.get($theme, foreground-palette, noder-base), 0.56);
         }
 
         .title,
         .input-title {
-            color: mat.get-color-from-palette($foreground, noder-modal-text);
+            color: map.get($theme, foreground-palette, noder-modal-text);
 
             .mat-icon {
-                color: mat.get-color-from-palette($foreground, noder-modal-text);
+                color: map.get($theme, foreground-palette, noder-modal-text);
             }
         }
 
         .actions .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/text-format-mobile/_text-format-mobile.theme.scss

@@ -2,37 +2,34 @@
 @use 'sass:map';
 
 @mixin text-format-mobile-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-text-format-mobile {
         .title {
-            color: mat.get-color-from-palette($foreground, noder-modal-text);
+            color: map.get($theme, foreground-palette, noder-modal-text);
         }
 
         .actions .mdc-fab {
-            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
-            background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+            color: map.get($theme, foreground-palette, noder-button-fab-text);
+            background-color: map.get($theme, background-palette, noder-button-sidenav-fab);
         }
 
         .text-style-container .mat-mdc-button {
-            background-color: mat.get-color-from-palette($background, noder-button-input-background);
-            color: mat.get-color-from-palette($foreground, noder-button-input-text);
+            background-color: map.get($theme, background-palette, noder-button-input-background);
+            color: map.get($theme, foreground-palette, noder-button-input-text);
         }
 
         app-nod-font .mat-mdc-button:not(:disabled) {
-            color: mat.get-color-from-palette($foreground, noder-base);
+            color: map.get($theme, foreground-palette, noder-base);
         }
 
         app-nod-font-size {
-            border-color: mat.get-color-from-palette($foreground, noder-base);
+            border-color: map.get($theme, foreground-palette, noder-base);
 
             .mat-mdc-button:not(:disabled) {
-                color: mat.get-color-from-palette($foreground, noder-base);
+                color: map.get($theme, foreground-palette, noder-base);
             }
 
             input {
-                color: mat.get-color-from-palette($foreground, noder-base);
+                color: map.get($theme, foreground-palette, noder-base);
             }
         }
 
@@ -41,45 +38,45 @@
         }
 
         .empty-numbering {
-            border-color: mat.get-color-from-palette($background, noder-numbering-border);
-            color: mat.get-color-from-palette($foreground, noder-base);
+            border-color: map.get($theme, background-palette, noder-numbering-border);
+            color: map.get($theme, foreground-palette, noder-base);
 
             &.selected {
-                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);
         }
 
         .numbering-line mat-icon {
-            border-color: mat.get-color-from-palette($background, noder-numbering-border);
-            stroke: mat.get-color-from-palette($foreground, noder-numbering-line);
+            border-color: map.get($theme, background-palette, noder-numbering-border);
+            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);
             }
 
             &.selected {
-                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
+                border-color: map.get($theme, background-palette, noder-selected-numbering-border);
             }
         }
     }

package/src/lib/editor/components/_editor.theme.scss

@@ -2,63 +2,60 @@
 @use 'sass:map';
 
 @mixin editor-component-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-editor {
         ::-webkit-scrollbar-track {
-            background-color: mat.get-color-from-palette($background, noder-scrollbar-track);
+            background-color: map.get($theme, background-palette, noder-scrollbar-track);
         }
 
         ::-webkit-scrollbar-thumb {
-            background: mat.get-color-from-palette($background, noder-scrollbar-thumb);
+            background: map.get($theme, background-palette, noder-scrollbar-thumb);
         }
 
         .container {
-            background-color: mat.get-color-from-palette($background, noder-editor-background);
+            background-color: map.get($theme, background-palette, noder-editor-background);
 
             .page {
-                background-color: mat.get-color-from-palette($background, noder-page-background);
+                background-color: map.get($theme, background-palette, noder-page-background);
             }
         }
 
         .drawer-container {
             .mat-mdc-button {
-                border: 1px solid mat.get-color-from-palette($foreground, form-field-border);
+                border: 1px solid map.get($theme, foreground-palette, form-field-border);
             }
 
             .mat-button-toggle-button {
-                background-color: mat.get-color-from-palette($background, noder-button-input-background);
-                color: mat.get-color-from-palette($foreground, noder-button-input-text);
+                background-color: map.get($theme, background-palette, noder-button-input-background);
+                color: map.get($theme, foreground-palette, noder-button-input-text);
             }
 
             .mat-button-toggle-button:hover {
-                background-color: mat.get-color-from-palette($background, noder-button-input-hover);
+                background-color: map.get($theme, background-palette, noder-button-input-hover);
             }
 
             .mat-button-toggle-checked button {
-                background-color: mat.get-color-from-palette($background, noder-button-input-checked);
-                color: mat.get-color-from-palette($foreground, noder-button-toggle-checked);
+                background-color: map.get($theme, background-palette, noder-button-input-checked);
+                color: map.get($theme, foreground-palette, noder-button-toggle-checked);
             }
         }
     }
 
     .noder-modal {
-        background-color: mat.get-color-from-palette($background, noder-modal-background);
+        background-color: map.get($theme, background-palette, noder-modal-background);
 
         .mat-mdc-menu-item {
-            color: mat.get-color-from-palette($foreground, noder-modal-text);
+            color: map.get($theme, foreground-palette, noder-modal-text);
 
             .mat-icon-no-color {
-                color: mat.get-color-from-palette($foreground, noder-modal-text);
+                color: map.get($theme, foreground-palette, noder-modal-text);
             }
 
             .mat-mdc-menu-submenu-icon {
-                color: mat.get-color-from-palette($foreground, noder-modal-text);
+                color: map.get($theme, foreground-palette, noder-modal-text);
             }
 
             &:not([disabled]):hover {
-                background-color: mat.get-color-from-palette($background, noder-modal-background-hover);
+                background-color: map.get($theme, background-palette, noder-modal-background-hover);
             }
         }
     }
@@ -67,39 +64,39 @@
     .noder-modal {
         /* stylelint-disable no-descending-specificity */
         .mat-drawer {
-            background-color: mat.get-color-from-palette($background, noder-editor-mat-drawer);
+            background-color: map.get($theme, background-palette, noder-editor-mat-drawer);
         }
 
         .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-text-field__input {
-            color: mat.get-color-from-palette($foreground, noder-text);
-            caret-color: mat.get-color-from-palette($foreground, noder-text);
+            color: map.get($theme, foreground-palette, noder-text);
+            caret-color: map.get($theme, foreground-palette, noder-text);
         }
 
         .mdc-text-field:not(.mdc-text-field--invalid) {
             &.mdc-text-field--disabled {
-                border-color: mat.get-color-from-palette($foreground, noder-form-field-border-disabled);
+                border-color: map.get($theme, foreground-palette, noder-form-field-border-disabled);
 
                 .mdc-floating-label {
-                    color: mat.get-color-from-palette($foreground, noder-form-field-border-disabled);
+                    color: map.get($theme, foreground-palette, noder-form-field-border-disabled);
                 }
             }
 
             &.mdc-text-field--focused,
             &:hover:not(.mdc-text-field--disabled) {
                 .mdc-notched-outline > * {
-                    border-color: mat.get-color-from-palette($foreground, noder-form-field-border-focused);
+                    border-color: map.get($theme, foreground-palette, noder-form-field-border-focused);
                 }
 
                 .mdc-floating-label {
-                    color: mat.get-color-from-palette($foreground, noder-form-field-border-focused);
+                    color: map.get($theme, foreground-palette, noder-form-field-border-focused);
                 }
             }
 
             .mdc-notched-outline > * {
-                border-color: mat.get-color-from-palette($foreground, noder-form-field-border);
+                border-color: map.get($theme, foreground-palette, noder-form-field-border);
 
                 .mdc-floating-label {
-                    color: mat.get-color-from-palette($foreground, noder-form-field-border);
+                    color: map.get($theme, foreground-palette, noder-form-field-border);
                 }
             }
         }
@@ -107,6 +104,6 @@
     }
 
     .ngx-colors-overlay .opened {
-        background-color: mat.get-color-from-palette($background, noder-editor-background);
+        background-color: map.get($theme, background-palette, noder-editor-background);
     }
 }