@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/core/styles/theming/_components-theming.scss

@@ -148,6 +148,39 @@
         )
     );
 
+    $button-toggle: (
+        button-toggle-group: (
+            background: map-get($tokens, 'button-toggle-group-#{$scheme}-background'),
+            border: map-get($tokens, 'button-toggle-group-#{$scheme}-border'),
+            states: (
+                disabled: (
+                    opacity: map-get($tokens, 'button-toggle-group-#{$scheme}-states-disabled-opacity')
+                )
+            ),
+        ),
+        button-toggle: (
+            color: map-get($tokens, 'button-toggle-#{$scheme}-color'),
+            icon: map-get($tokens, 'button-toggle-#{$scheme}-icon'),
+            states: (
+                disabled: (
+                    opacity: map-get($tokens, 'button-toggle-#{$scheme}-states-disabled-opacity')
+                ),
+                hover: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-icon')
+                ),
+                active: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-active-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-active-icon')
+                ),
+                pressed: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-icon')
+                )
+            )
+        )
+    );
+
     $card: (
         error: (
             vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
@@ -353,6 +386,57 @@
         dd: map-get($tokens, 'description-list-#{$scheme}-dd')
     );
 
+    $file-upload: (
+        single: (
+            default: (
+                background: map-get($tokens, 'file-upload-#{$scheme}-single-default-background'),
+                border: map-get($tokens, 'file-upload-#{$scheme}-single-default-border'),
+            ),
+            states: (
+                error: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-border')
+                ),
+                progress: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-border')
+                ),
+                drag-n-drop: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-border')
+                ),
+                disabled: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
+                )
+            )
+        ),
+        multiple: (
+            default: (
+                background: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-background'),
+                border: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-border'),
+            ),
+            states: (
+                error: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-border')
+                ),
+                progress: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-border')
+                ),
+                drag-n-drop: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-border')
+                ),
+                disabled: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
+                )
+            )
+        )
+    );
+
     $form-field: (
         border: map-get($tokens, 'form-field-#{$scheme}-border'),
         background: map-get($tokens, 'form-field-#{$scheme}-background'),
@@ -437,6 +521,11 @@
         state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
     );
 
+    $list: (
+        footer-background: map-get($tokens, 'list-#{$scheme}-footer-background'),
+        footer-divider: map-get($tokens, 'list-#{$scheme}-footer-divider'),
+    );
+
     $loader-overlay: (
         background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
 
@@ -694,18 +783,21 @@
         popup: $popup,
         badge: $badge,
         button: $button,
+        button-toggle: $button-toggle,
         card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
+        file-upload: $file-upload,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
         form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,
+        list: $list,
         loader-overlay: $loader-overlay,
         modal: $modal,
         markdown: $markdown,

package/core/styles/theming/_scrollbars-theme.nvl.scss

@@ -0,0 +1,98 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../functions/string' as *;
+
+
+@mixin nvl-mc-scrollbar-theme($theme) {
+    $scrollbar: map.get(map.get($theme, components), scrollbar);
+    $thumb: map.get($scrollbar, thumb);
+    $arrow: map.get($scrollbar, arrow);
+
+    .mc-scrollbar {
+        // firefox
+        scrollbar-color: map.get($thumb, normal) map.get($scrollbar, track);
+
+        // webkit
+        &::-webkit-scrollbar,
+        ::-webkit-scrollbar {
+            background-color: map.get($scrollbar, track);
+        }
+
+
+        &::-webkit-scrollbar-corner,
+        ::-webkit-scrollbar-corner {
+            background-color: map.get($scrollbar, corner-background);
+        }
+
+        &::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            background-color: map.get($thumb, normal);
+
+            border-color: map.get($scrollbar, track);
+            border-style: solid;
+
+            &:hover {
+                background-color: map.get($thumb, hover);
+            }
+
+            &:disabled {
+                background-color: map.get($thumb, disabled);
+            }
+
+            &:active {
+                background-color: map.get($thumb, active);
+            }
+        }
+
+        /* stylelint-disable */
+        &::-webkit-scrollbar-button,
+        ::-webkit-scrollbar-button {
+            background-color: map.get($arrow, background);
+            background-size: 10px 10px;
+            background-repeat: no-repeat;
+            background-position: center center;
+
+            &:single-button {
+                &:horizontal:decrement {
+                    @include arrow-image(right, map.get($arrow, normal));
+                }
+
+                &:horizontal:increment {
+                    @include arrow-image(left, map.get($arrow, normal));
+                }
+
+                &:vertical:decrement {
+                    @include arrow-image(up, map.get($arrow, normal));
+                }
+
+                &:vertical:increment {
+                    @include arrow-image(down, map.get($arrow, normal));
+                }
+            }
+
+            // disable double-button
+            &:vertical:start:increment,
+            &:vertical:end:decrement,
+            &:horizontal:end:increment,
+            &:horizontal:end:decrement {
+                display: none;
+            }
+        }
+        /* stylelint-enable */
+    }
+}
+
+@mixin arrow-image($direction, $color) {
+    $color: str-replace('#{$color}', '#', '%23');
+
+    @if $direction == up {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4L4 0L8 4H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == left {
+        background-image: url('data:image/svg+xml;utf8,<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.354973 0.111252L3.64503 3.40028C3.84808 3.60327 3.84107 3.91407 3.64503 4.11011L0.354973 7.40017C0.15192 7.60322 0 7.53112 0 7.25478V0.256747C0 -0.0128497 0.158927 -0.0847332 0.354973 0.111252Z" fill="#{$color}"/></svg>');
+    } @else if $direction == down {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L4 4L8 0H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == right {
+        background-image: url('data:image/svg+xml;utf8,<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.64975 0.111682C3.8458 -0.0845414 4.00472 -0.0128511 4.00472 0.256746V7.25478C4.00472 7.53112 3.8528 7.6034 3.64975 7.4006L0.359696 4.11454C0.163649 3.91873 0.156643 3.60794 0.359696 3.40471L3.64975 0.111682Z" fill="#{$color}"/></svg>');
+    }
+}

package/core/styles/theming/_scrollbars.nvl.scss

@@ -0,0 +1,39 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens.nvl.import' as tokens;
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-scrollbar {
+    //firefox
+    scrollbar-width: auto;
+
+    // webkit
+    &::-webkit-scrollbar,
+    ::-webkit-scrollbar {
+        width: var(--mc-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+    }
+
+    &::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb {
+        width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        border-width: var(
+            --mc-scrollbar-size-thumb-inset-border-width,
+            map.get($tokens, scrollbar-size-thumb-border-width)
+        );
+        border-radius: var(
+            --mc-scrollbar-size-thumb-inset-border-radius,
+            map.get($tokens, scrollbar-size-thumb-border-radius)
+        );
+    }
+
+    &::-webkit-scrollbar-button,
+    ::-webkit-scrollbar-button {
+        display: none;
+
+        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
+        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
+    }
+}

package/core/styles/theming/_theming.nvl.scss

@@ -0,0 +1,137 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'theming' as *;
+@use 'components-theming.nvl' as *;
+
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin nvl-mc-core-theme($theme) {
+    .mc-app-background {
+        $background: map.get($theme, background);
+        $foreground: map.get($theme, foreground);
+
+        background-color: mc-color($background, background);
+        color: mc-color($foreground, text);
+    }
+
+    .mc-theme-loaded-marker {
+        display: none;
+    }
+
+    //.mc-primary {
+    //    color: mc-color(map.get($theme, theme));
+    //}
+    //
+    //.mc-error {
+    //    color: mc-color(map.get($theme, error));
+    //}
+    //
+    //.mc-warning {
+    //    color: mc-color(map.get($theme, warning));
+    //}
+    //
+    //.mc-success {
+    //    color: mc-color(map.get($theme, success));
+    //}
+    //
+    //.mc-info {
+    //    color: mc-color(map.get($theme, info));
+    //}
+}
+
+@function _theme_states($tokens, $scheme) {
+    @return (
+        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
+        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
+        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
+        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
+    );
+}
+
+@function _theme_foreground($tokens, $scheme) {
+    @return (
+        text: map.get($tokens, '#{$scheme}-foreground-text'),
+        text-less-contrast: map.get($tokens, '#{$scheme}-foreground-text-less-contrast'),
+        text-disabled: map.get($tokens, '#{$scheme}-foreground-text-disabled'),
+        text-error: map.get($tokens, '#{$scheme}-foreground-text-error'),
+        text-success: map.get($tokens, '#{$scheme}-foreground-text-success'),
+
+        divider: map.get($tokens, '#{$scheme}-foreground-divider'),
+        border: map.get($tokens, '#{$scheme}-foreground-border'),
+        icon: map.get($tokens, '#{$scheme}-foreground-icon'),
+
+        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+    );
+}
+
+@function _theme_background($tokens, $scheme) {
+    @return (
+        background: map.get($tokens, '#{$scheme}-background-background'),
+        background-disabled: map.get($tokens, '#{$scheme}-background-background-disabled'),
+        background-less-contrast: map.get($tokens, '#{$scheme}-background-background-less-contrast'),
+        background-under: map.get($tokens, '#{$scheme}-background-background-under'),
+
+        overlay-hover: map.get($tokens, '#{$scheme}-background-overlay-hover'),
+        overlay-active: map.get($tokens, '#{$scheme}-background-overlay-active'),
+        overlay-disabled: map.get($tokens, '#{$scheme}-background-overlay-disabled')
+    );
+}
+
+@function mc-palette($base-palette, $default) {
+    @return map.merge($base-palette, (default: $default));
+}
+
+@function _theme_palette($tokens, $scheme, $name) {
+    @return mc-palette(
+        map.get($tokens, '#{$scheme}-#{$name}-palette'), map.get($tokens, '#{$scheme}-#{$name}-default')
+    )
+}
+
+@function nvl-mc-light-theme($tokens) {
+    $scheme: 'light-color-scheme';
+
+    @return (
+        is-dark: false,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        theme: _theme_palette($tokens, $scheme, theme),
+        secondary: _theme_palette($tokens, $scheme, secondary),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: nvl-mc-components-theme($tokens, $scheme),
+        tokens: $tokens
+    );
+}
+
+@function nvl-mc-dark-theme($tokens) {
+    $scheme: 'dark-color-scheme';
+
+    @return (
+        is-dark: true,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        theme: _theme_palette($tokens, $scheme, theme),
+        secondary: _theme_palette($tokens, $scheme, secondary),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: nvl-mc-components-theme($tokens, $scheme),
+        tokens: $tokens
+    );
+}

package/core/styles/theming/prebuilt/dark-theme.nvl.scss

@@ -0,0 +1,20 @@
+@use 'sass:meta';
+
+// this file used only for generate .css bundle
+@use '../../tokens.nvl.import' as tokens;
+
+$tokens: meta.module-variables(tokens);
+
+@use '../../core';
+@use '../theming.nvl' as theming;
+@use '../../mosaic-theme.nvl' as mosaic-theme;
+
+
+@include core.mc-core();
+
+// Include all theme styles for the components.
+$theme: theming.nvl-mc-dark-theme($tokens);
+@include mosaic-theme.nvl-mosaic-theme($theme);
+
+// Include all typography for the components.
+@include mosaic-theme.nvl-mosaic-typography($tokens);

package/core/styles/theming/prebuilt/light-theme.nvl.scss

@@ -0,0 +1,20 @@
+@use 'sass:meta';
+
+// this file used only for generate .css bundle
+@use '../../tokens.nvl.import' as tokens;
+
+$tokens: meta.module-variables(tokens);
+
+@use '../../core';
+@use '../theming.nvl' as theming;
+@use '../../mosaic-theme.nvl' as mosaic-theme;
+
+
+@include core.mc-core();
+
+// Include all theme styles for the components.
+$theme: theming.nvl-mc-light-theme($tokens);
+@include mosaic-theme.nvl-mosaic-theme($theme);
+
+// Include all typography for the components.
+@include mosaic-theme.nvl-mosaic-typography($tokens);

package/core/styles/typography/_typography.scss

@@ -33,7 +33,8 @@
         small-text:             map.get($typography, small-text),
         extra-small-text:       map.get($typography, extra-small-text),
         extra-small-text-caps:  map.get($typography, extra-small-text-caps),
-        extra-small-text-mono:  map.get($typography, extra-small-text-mono)
+        extra-small-text-mono:  map.get($typography, extra-small-text-mono),
+        extra-small-text-strong:  map.get($typography, extra-small-text-strong)
     );
 
     @each $key, $level in $config {
@@ -44,7 +45,7 @@
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family));
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
 }
 
 @function mc-markdown-typography-config($tokens) {
@@ -74,7 +75,7 @@
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family));
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
 }
 
 
@@ -146,7 +147,7 @@
     .mc-caption_mono {
         @include mc-typography-level-to-styles($config, caption-mono);
     }
-    
+
     .mc-caption_mono_strong {
         @include mc-typography-level-to-styles($config, caption-mono-strong);
     }

package/core/utils/data-size/config.d.ts

@@ -0,0 +1,20 @@
+export declare enum MeasurementSystem {
+    SI = "SI",
+    IEC = "IEC"
+}
+export declare const sizeUnitsConfig: {
+    defaultUnitSystem: MeasurementSystem;
+    defaultPrecision: number;
+    unitSystems: {
+        SI: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+        IEC: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+    };
+};

package/core/utils/data-size/data-size.pipe.d.ts

@@ -0,0 +1,13 @@
+import { PipeTransform } from '@angular/core';
+import { MeasurementSystem } from './config';
+import * as i0 from "@angular/core";
+export declare class McDataSizePipe implements PipeTransform {
+    transform(source: number, precision?: number, measurementSystem?: MeasurementSystem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDataSizePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<McDataSizePipe, "mcDataSize", false>;
+}
+export declare class McDataSizeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDataSizeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McDataSizeModule, [typeof McDataSizePipe], never, [typeof McDataSizePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McDataSizeModule>;
+}

package/core/utils/data-size/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './size';
+export * from './data-size.pipe';

package/core/utils/data-size/size.d.ts

@@ -0,0 +1,16 @@
+import { MeasurementSystem } from './config';
+export declare const formatDataSize: (value: number, systemCode?: MeasurementSystem, precision?: number) => {
+    value: string;
+    unit: string;
+};
+/**
+ * Переводит байты в Кб, Мб, Гб
+ *
+ * @param value количество байт
+ * @param systemCode система измерения
+ * @param threshold нижний порог подсчета
+ */
+export declare const getHumanizedBytes: (value: number, systemCode?: MeasurementSystem, threshold?: number) => {
+    result: number;
+    unit: string;
+};

package/core/utils/public-api.d.ts

@@ -1 +1,2 @@
 export * from './utils';
+export * from './data-size';

package/datepicker/_datepicker-theme.nvl.scss

@@ -0,0 +1,101 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/popup';
+@use '../core/styles/theming/theming';
+@use '../core/styles/typography/typography-utils' as *;
+
+
+$mc-datepicker-selected-fade-amount: 0.6;
+$mc-datepicker-today-fade-amount: 0.2;
+
+@mixin nvl-mc-datepicker-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, theme);
+    $secondary: map.get($theme, secondary);
+
+    $datepicker: map.get(map.get($theme, components), datepicker);
+
+    .mc-calendar__table-header {
+        color: theming.mc-color($secondary, 60);
+    }
+
+    .mc-datepicker-toggle__button.mc-button-icon {
+        border-color: transparent;
+        border-radius: 0;
+        background: transparent;
+        opacity: 1;
+
+        .mc-icon {
+            color: theming.mc-color($foreground, icon);
+        }
+    }
+
+    .mc-calendar__table-header-divider::after {
+        background: map.get($foreground, divider);
+    }
+
+    .mc-calendar__body-cell-content {
+        color: map.get($foreground, text);
+        border-color: transparent;
+    }
+
+    .mc-calendar__body_disabled > .mc-calendar__body-cell-content:not(.mc-selected) {
+        color: map.get($foreground, text-disabled);
+    }
+
+    .cdk-keyboard-focused .mc-calendar__body_active,
+    .cdk-program-focused .mc-calendar__body_active {
+        & > .mc-calendar__body-cell-content {
+            border-color: map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        }
+    }
+
+    .mc-calendar__body-cell:not(.mc-calendar__body_disabled):hover {
+        & > .mc-calendar__body-cell-content:not(.mc-selected) {
+            background-color: theming.mc-color($secondary, A8);
+        }
+    }
+
+    .mc-calendar__body-today {
+        color: map.get($datepicker, state-selected-today-color);
+    }
+
+    .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
+        border-color: map.get($background, background-disabled);
+    }
+
+    .mc-calendar__body-cell-content.mc-selected {
+        background: map.get($datepicker, state-selected-background);
+        color: map.get($datepicker, state-selected-color);
+    }
+
+    .mc-calendar__body_disabled > .mc-selected {
+        background-color: map.get($datepicker, state-selected-background);
+    }
+
+    .mc-datepicker__content {
+        @include popup.popup-params($theme);
+
+        color: map.get($foreground, text);
+    }
+}
+
+@mixin nvl-mc-datepicker-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-calendar {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+    }
+
+    .mc-calendar__table-header th {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
+    }
+
+    .mc-calendar__body-today {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+    }
+}

package/datepicker/datepicker-toggle.scss

@@ -10,7 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
     outline: 0;
 }
 
-.mc-datepicker-toggle__button.mc-icon-button {
+.mc-datepicker-toggle__button.mc-button-icon {
     width: var(--mc-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
     height: var(--mc-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
     margin-left: 2px;
@@ -34,7 +34,7 @@ $tokens: meta.module-variables(tokens) !default;
             height: 1.5em;
         }
 
-        .mc-icon-button .mc-datepicker-toggle__default-icon {
+        .mc-button-icon .mc-datepicker-toggle__default-icon {
             margin: auto;
         }
     }

package/divider/_divider-theme.nvl.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+
+@mixin nvl-mc-divider-theme($theme) {
+    $divider: map.get(map.get($theme, components), divider);
+
+    .mc-divider {
+        background: map.get($divider, color);
+    }
+}