@ptsecurity/mosaic 12.2.1 → 13.1.0

package/autocomplete/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-autocomplete.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
-  "esm2015": "../esm2015/autocomplete/ptsecurity-mosaic-autocomplete.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
+  "module": "../fesm2015/ptsecurity-mosaic-autocomplete.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-autocomplete.mjs",
+  "esm2020": "../esm2020/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-autocomplete.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-autocomplete.mjs",
   "typings": "ptsecurity-mosaic-autocomplete.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/autocomplete"

package/button/button.component.d.ts

@@ -1,37 +1,40 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
-import { CanColor, CanDisable, CanDisableCtor, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
+import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
 import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
     icons: QueryList<McIcon>;
-    nativeElement: Element;
+    nativeElement: HTMLElement;
     get isIconButton(): boolean;
     constructor(elementRef: ElementRef, renderer: Renderer2);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "button[mc-button], a[mc-button]", never, {}, {}, ["icons"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"]>;
 }
 export declare class McButtonBase {
     _elementRef: ElementRef;
     constructor(_elementRef: ElementRef);
 }
-export declare const McButtonMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof McButtonBase;
+export declare const McButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof McButtonBase;
 export declare class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
-    private _focusMonitor;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor);
+    private focusMonitor;
+    hasFocus: boolean;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
+    onFocus($event: any): void;
+    onBlur(): void;
+    getHostElement(): any;
     focus(): void;
     focusViaKeyboard(): void;
-    getHostElement(): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "button[mc-button]", never, { "disabled": "disabled"; "color": "color"; }, {}, never, ["*"]>;
-}
-export declare class McAnchor extends McButton {
-    constructor(focusMonitor: FocusMonitor, elementRef: ElementRef);
     haltDisabledEvents(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McAnchor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McAnchor, "a[mc-button]", never, { "disabled": "disabled"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "[mc-button]", never, { "color": "color"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, {}, never, ["*"]>;
 }

package/button/button.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class McButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McAnchor, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McAnchor, typeof i1.McButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonModule>;
 }

package/button/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-button.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-button.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-button.js",
-  "esm2015": "../esm2015/button/ptsecurity-mosaic-button.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-button.js",
+  "module": "../fesm2015/ptsecurity-mosaic-button.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-button.mjs",
+  "esm2020": "../esm2020/button/ptsecurity-mosaic-button.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-button.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-button.mjs",
   "typings": "ptsecurity-mosaic-button.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/button"

package/button-toggle/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-button-toggle.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
-  "esm2015": "../esm2015/button-toggle/ptsecurity-mosaic-button-toggle.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
+  "module": "../fesm2015/ptsecurity-mosaic-button-toggle.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-button-toggle.mjs",
+  "esm2020": "../esm2020/button-toggle/ptsecurity-mosaic-button-toggle.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-button-toggle.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-button-toggle.mjs",
   "typings": "ptsecurity-mosaic-button-toggle.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/button-toggle"

package/card/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-card.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-card.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-card.js",
-  "esm2015": "../esm2015/card/ptsecurity-mosaic-card.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-card.js",
+  "module": "../fesm2015/ptsecurity-mosaic-card.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-card.mjs",
+  "esm2020": "../esm2020/card/ptsecurity-mosaic-card.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-card.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-card.mjs",
   "typings": "ptsecurity-mosaic-card.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/card"

package/checkbox/README.md

@@ -0,0 +1 @@
+Please see the official documentation at https://github.com/positive-js/mosaic

package/checkbox/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-checkbox.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-checkbox.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-checkbox.js",
-  "esm2015": "../esm2015/checkbox/ptsecurity-mosaic-checkbox.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-checkbox.js",
+  "module": "../fesm2015/ptsecurity-mosaic-checkbox.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-checkbox.mjs",
+  "esm2020": "../esm2020/checkbox/ptsecurity-mosaic-checkbox.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-checkbox.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-checkbox.mjs",
   "typings": "ptsecurity-mosaic-checkbox.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/checkbox"

package/core/formatters/date/formatter.d.ts

@@ -31,13 +31,14 @@ export interface FormatterRelativeTemplate {
     variables?: {
         [name: string]: string;
     };
-    SECONDS_AGO: string;
-    MINUTES_AGO: string;
-    TODAY: string;
-    YESTERDAY: string;
     BEFORE_YESTERDAY: string;
+    YESTERDAY: string;
+    TODAY: string;
+    TOMORROW: string;
+    AFTER_TOMORROW: string;
 }
-export interface AbsoluteDateTimeOptions {
+export interface DateTimeOptions {
+    seconds?: boolean;
     milliseconds?: boolean;
 }
 export interface FormatterConfig {
@@ -73,7 +74,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns relative date by template
      */
-    relativeDate(date: D, template: FormatterRelativeTemplate): string;
+    relativeDate(date: D, template: FormatterRelativeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns relative date in short format
@@ -84,14 +85,27 @@ export declare class DateFormatter<D> {
      * @returns relative date in long format
      */
     relativeLongDate(date: D): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in short format with time
+     */
+    relativeShortDateTime(date: D, options?: DateTimeOptions): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in long format with time
+     */
+    relativeLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @param params - parameters
      * @param datetime - should time be shown as well
+     * @param seconds - should time with seconds be shown as well
      * @param milliseconds - should time with milliseconds be shown as well
      * @returns absolute date in common format
      */
-    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, milliseconds?: boolean): string;
+    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns absolute date in short format
@@ -99,10 +113,10 @@ export declare class DateFormatter<D> {
     absoluteShortDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in short format with time
      */
-    absoluteShortDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteShortDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @returns absolute date in long format
@@ -110,10 +124,10 @@ export declare class DateFormatter<D> {
     absoluteLongDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in long format with time
      */
-    absoluteLongDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -125,9 +139,11 @@ export declare class DateFormatter<D> {
      * @param startDate - start date
      * @param endDate - end date
      * @param template - template
+     * @param seconds - should time with seconds be shown as well
+     * @param milliseconds - should time with milliseconds be shown as well
      * @returns opened date
      */
-    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate): string;
+    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -141,7 +157,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns range date in template format with time
      */
-    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate): string;
+    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -151,28 +167,36 @@ export declare class DateFormatter<D> {
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in short format with time
      */
-    rangeShortDateTime(startDate: D | null, endDate?: D): string;
+    rangeShortDateTime(startDate: D | null, endDate?: D | null, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
      * @returns range date in long format
      */
-    rangeLongDate(startDate: D | null, endDate?: D): string;
+    rangeLongDate(startDate: D | null, endDate?: D | null): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in long format with time
      */
-    rangeLongDateTime(startDate: D | null, endDate?: D): string;
+    rangeLongDateTime(startDate: D | null, endDate?: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range middle date with time
      */
-    rangeMiddleDateTime(startDate: D, endDate: D): string;
+    rangeMiddleDateTime(startDate: D, endDate: D, options?: DateTimeOptions): string;
     private compileVariables;
+    private isBeforeYesterday;
+    private isYesterday;
+    private isToday;
+    private isTomorrow;
+    private isAfterTomorrow;
     private hasSame;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateFormatter<any>>;

package/core/formatters/date/templates/en-US.d.ts

@@ -1,18 +1,18 @@
 export declare const enUS: {
     relativeTemplates: {
         short: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
         long: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
     };
     absoluteTemplates: {

package/core/formatters/date/templates/ru-RU.d.ts

@@ -1,18 +1,18 @@
 export declare const ruRU: {
     relativeTemplates: {
         short: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
         long: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
     };
     absoluteTemplates: {

package/core/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-core.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-core.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-core.js",
-  "esm2015": "../esm2015/core/ptsecurity-mosaic-core.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-core.js",
+  "module": "../fesm2015/ptsecurity-mosaic-core.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-core.mjs",
+  "esm2020": "../esm2020/core/ptsecurity-mosaic-core.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-core.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-core.mjs",
   "typings": "ptsecurity-mosaic-core.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/core"

package/core/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './version';
 export * from './utils/index';
 export * from './common-behaviors/index';
 export * from './line/line';

package/core/version.d.ts

@@ -0,0 +1,2 @@
+import { Version } from '@angular/core';
+export declare const VERSION: Version;

package/datepicker/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-datepicker.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-datepicker.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-datepicker.js",
-  "esm2015": "../esm2015/datepicker/ptsecurity-mosaic-datepicker.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-datepicker.js",
+  "module": "../fesm2015/ptsecurity-mosaic-datepicker.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-datepicker.mjs",
+  "esm2020": "../esm2020/datepicker/ptsecurity-mosaic-datepicker.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-datepicker.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-datepicker.mjs",
   "typings": "ptsecurity-mosaic-datepicker.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/datepicker"

package/design-tokens/legacy-2017/tokens/components/checkbox.json5

@@ -0,0 +1,39 @@
+{
+    checkbox: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.300.value}' },
+            states: {
+                checked: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.500.value}' }
+                },
+                focused: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                    shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.600.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.400.value}' },
+            states: {
+                checked: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.600.value}' }
+                },
+                focused: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400.value}' }
+                }
+            }
+        },
+        size: {
+            width: { value: '16px' },
+            'label-margin': { value: '{margin.iconText_M-horizontal}' },
+            'border-width': { value: '1px' },
+            'toggle-box-shadow': { value: 'inset 0 0 1px 0 rgba(0, 0, 0, 0.2)' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/modal.json5

@@ -0,0 +1,79 @@
+{
+    modal: {
+        'light-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {light-color-scheme.second.palette.value.300.value}, 0 6px 12px 0 rgba(0, 0, 0, 0.5))'
+            },
+            'body-top-shadow':{
+                value: '0 2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'body-bottom-shadow':{
+                value: '0 -2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'background-mask': { value: 'rgba(0, 0, 0, 0.5)' }
+        },
+        'dark-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {dark-color-scheme.second.palette.value.800.value}, 0 6px 12px 0 rgba(0, 0, 0, 0.5))'
+            },
+            'body-top-shadow':{
+                value: '0 2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'body-bottom-shadow':{
+                value: '0 -2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'background-mask': { value: 'rgba(0, 0, 0, 0.5)' }
+        },
+        size: {
+            small: { value: '400px' },
+            normal: { value: '640px' },
+            large: { value: '960px' },
+
+            top: { value: '48px' },
+            'close-width': { value: '56px' },
+            'border-radius': { value: '4px' },
+            'border-width': { value: '1px' }
+        }
+    },
+    'modal-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
+        size: {
+            'border-radius': { value: '4px 4px 0 0' },
+            padding: { value: '14px 16px' }
+        },
+        font: {
+            default: { value: 'title' }
+        }
+    },
+    'modal-body': {
+        size: {
+            'max-height': { value: 'calc(100vh - 260px)' },
+            padding: { value: '16px 24px 24px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'modal-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
+        size: {
+            'border-radius': { value: '0 0 4px 4px' },
+            padding: { value: '16px {padding.headerFooter-horizontal}' }
+        }
+    },
+    'modal-confirm': {
+        size: {
+            padding: { value: '24px' }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/navbar.json5

@@ -0,0 +1,69 @@
+{
+    navbar: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.primary.palette.value.700.value}' },
+
+            'divider-background': { value: 'rgba(255, 255, 255, 0.3)' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+
+            'divider-background': { value: 'rgba(255, 255, 255, 0.3)' }
+        },
+        size: {
+            'icon-margin': { value: '6px' }
+        },
+        font: {
+            title: { value: 'body' }
+        }
+    },
+    'vertical-navbar': {
+        size: {
+            states: {
+                'expanded-width': { value: '240px' },
+                'collapsed-width': { value: '56px' }
+            },
+            'icon-margin': { value: '16px' }
+        }
+    },
+    'navbar-item': {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+            icon: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{light-color-scheme.second.palette.value.700.value}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{light-color-scheme.primary.palette.value.800.value}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.primary.palette.value.100.value}' },
+            icon: { value: '{dark-color-scheme.primary.palette.value.100.value}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{dark-color-scheme.second.palette.value.600.value}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        size: {
+            padding: { value: '{padding.control-horizontal}' },
+            height: { value: '48px' },
+            height_vertical: { value: '56px' }
+        }
+    },
+    'navbar-brand': {
+        size: {
+            padding: { value: '12px' },
+            'margin-right': { value: '24px' }
+        },
+        font: {
+            title: { value: 'title' }
+        }
+    }
+}