@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/link/_link-theme.nvl.scss

@@ -0,0 +1,178 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-link($foreground, $link, $tokens) {
+    display: inline-block;
+
+    color: map.get($link, text);
+    text-decoration: none;
+    cursor: pointer;
+
+    transition: color ease-out 300ms;
+
+    &:focus {
+        outline: none;
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+        color: map.get($link, state-hover-text);
+        transition: color 0ms;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: map.get($link, state-hover-border-bottom);
+        }
+
+        & .mc-icon {
+            color: map.get($link, state-hover-text);
+        }
+    }
+
+    &:active {
+        color: map.get($link, state-active-text);
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: map.get($link, state-active-border-bottom);
+        }
+    }
+
+    &.cdk-keyboard-focused {
+        outline: map.get($link, state-focused-outline) solid map.get($link, link-size-state-focused-outline-width);
+
+        outline-offset: map.get($link, link-size-state-focused-outline-offset);
+    }
+
+    & .mc-icon {
+        color: inherit;
+    }
+
+    &.mc-text-only,
+    &.mc-text-with-icon .mc-link__text {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: map.get($link, border-bottom);
+    }
+
+    &.mc-text-with-icon .mc-link__text {
+        &:not(:first-child) {
+            margin-left: map.get($tokens, link-size-normal-content-padding);
+        }
+
+        &:not(:last-child) {
+            margin-right: map.get($tokens, link-size-normal-content-padding);
+        }
+    }
+
+    &.mc-link_pseudo {
+        display: inline;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom: none !important;
+        }
+    }
+
+    &.mc-link_no-underline {
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: transparent;
+        }
+    }
+
+    &.mc-link_big {
+        &.mc-text-with-icon .mc-link__text {
+            &:not(:first-child) {
+                margin-left: map.get($tokens, link-size-big-content-padding);
+            }
+
+            &:not(:last-child) {
+                margin-right: map.get($tokens, link-size-big-content-padding);
+            }
+        }
+    }
+
+    &[disabled] {
+        color: map.get($foreground, text-disabled);
+
+        cursor: default;
+        pointer-events: none;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: map.get($link, border-bottom);
+        }
+
+        & .mc-icon {
+            color: map.get($foreground, text-disabled);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+}
+
+@mixin nvl-mc-link-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $link: map.get(map.get($theme, components), link);
+
+    $tokens: map.get($theme, tokens);
+
+    .mc-link:not(.mc-link_use-visited) {
+        &:visited {
+            color: map.get($link, text);
+        }
+
+        @include nvl-mc-link($foreground, $link, $tokens);
+    }
+
+    .mc-link.mc-link_use-visited {
+        &:visited {
+            color: map.get($link, state-visited-text);
+
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom-color: map.get($link, state-visited-border-bottom);
+            }
+
+            & .mc-icon {
+                color: map.get($link, state-visited-text);
+            }
+        }
+
+        @include nvl-mc-link($foreground, $link, $tokens);
+    }
+
+    @media print {
+        .mc-link_print:not([disabled]) {
+            color: map.get($foreground, text);
+
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom: none;
+            }
+
+            &::after {
+                color: map.get($foreground, text);
+
+                content: ":\a" attr(print);
+                white-space: pre;
+            }
+        }
+    }
+}
+
+@mixin nvl-mc-link-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-link {
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-normal));
+    }
+
+    .mc-link.mc-link_big {
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-big));
+    }
+}

package/link/_link-theme.scss

@@ -127,7 +127,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-
 @mixin mc-link-theme($theme) {
     $foreground: map.get($theme, foreground);
 
@@ -179,10 +178,10 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-link-typography($config) {
     .mc-link {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-default));
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-normal));
     }
 
     .mc-link.mc-link_caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-caption));
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-big));
     }
 }

package/link/link.component.d.ts

@@ -25,6 +25,9 @@ export declare class McLink extends McLinkMixinBase implements OnDestroy, HasTab
     get caption(): any;
     set caption(value: any);
     private _caption;
+    get big(): any;
+    set big(value: any);
+    private _big;
     get useVisited(): any;
     set useVisited(value: any);
     private _useVisited;
@@ -40,5 +43,5 @@ export declare class McLink extends McLinkMixinBase implements OnDestroy, HasTab
     getHostElement(): any;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<McLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLink, "[mc-link]", ["mcLink"], { "tabIndex": "tabIndex"; "disabled": "disabled"; "pseudo": "pseudo"; "noUnderline": "noUnderline"; "caption": "caption"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLink, "[mc-link]", ["mcLink"], { "tabIndex": "tabIndex"; "disabled": "disabled"; "pseudo": "pseudo"; "noUnderline": "noUnderline"; "caption": "caption"; "big": "big"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-theme.nvl.scss

@@ -0,0 +1,47 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-list-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .mc-list-item,
+    .mc-list-option {
+        color: map.get($foreground, text);
+    }
+
+    .mc-list-option {
+        outline: none;
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+        }
+
+        &.mc-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &.mc-disabled,
+        &[disabled] {
+            background: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin nvl-mc-list-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-list-item,
+    .mc-list-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, list-font-item));
+    }
+}

package/loader-overlay/_loader-overlay-theme.nvl.scss

@@ -0,0 +1,34 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-loader-overlay-theme($theme) {
+    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
+
+    .mc-loader-overlay {
+        background: map.get($loader-overlay, background);
+    }
+
+    .mc-loader-overlay-text {
+        color: map.get($loader-overlay, text);
+    }
+
+    .mc-loader-overlay-caption {
+        color: map.get($loader-overlay, caption);
+    }
+}
+
+@mixin nvl-mc-loader-overlay-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-loader-overlay-text {
+        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+    }
+
+    .mc-loader-overlay-caption {
+        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+    }
+}
+

package/loader-overlay/_loader-overlay-theme.scss

@@ -33,4 +33,3 @@ $tokens: meta.module-variables(tokens) !default;
         @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
     }
 }
-

package/markdown/_markdown-theme.nvl.scss

@@ -0,0 +1,142 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-markdown-theme($theme) {
+    $tokens: map.get($theme, tokens);
+
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $markdown: map.get(map.get($theme, components), markdown);
+
+    .mc-markdown {
+        color: map.get($foreground, text);
+        background: map.get($background, background);;
+
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .mc-markdown__h#{$i} {
+                color: map.get($markdown, h#{$i}-color);
+            }
+        }
+
+        .mc-markdown__p {
+            color: map.get($markdown, p-color);
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            color: map.get($markdown, list-color);
+        }
+
+        .mc-markdown__blockquote {
+            color: map.get($markdown, blockquote-text);
+            background: map.get($markdown, blockquote-background);
+            border-color: map.get($markdown, blockquote-border);
+            border-left-color: map.get($markdown, blockquote-line);
+        }
+
+        .mc-markdown__pre,
+        .mc-markdown__p > .mc-markdown__code {
+            color: map.get($markdown, code-text);
+            background-color: map.get($markdown, code-background);
+            border-color: map.get($markdown, code-border);
+        }
+
+        .mc-markdown__a {
+            color: map.get($markdown, link-text);
+            border-bottom-color: map.get($markdown, link-border-bottom);
+
+            &:visited {
+                color: map.get($markdown, link-state-visited-text);
+                border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
+            }
+
+            &:hover {
+                color: map.get($markdown, link-state-hover-text);
+                transition: color 0ms;
+                border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
+            }
+
+            &:active {
+                color: map.get($markdown, link-state-active-text);
+            }
+
+            &:focus {
+                outline:
+                    map.get($markdown, link-state-focused-outline)
+                    solid
+                    map.get($tokens, markdown-link-size-state-focused-outline-width);
+
+                outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
+            }
+        }
+
+        .mc-markdown__img + em {
+            color: map.get($markdown, image-caption-text);
+        }
+
+        .mc-markdown__hr {
+            border-bottom-color: map.get($markdown, hr-color);
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            color: map.get($markdown, table-header);
+            border-bottom-color: map.get($markdown, table-border);
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            color: map.get($markdown, table-body);
+        }
+    }
+}
+
+@mixin nvl-mc-markdown-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-markdown {
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .mc-markdown__h#{$i} {
+                @include mc-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
+            }
+        }
+
+        .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
+        }
+
+        .mc-markdown__blockquote > .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
+        }
+
+        .mc-markdown__code {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
+        }
+
+        .mc-markdown__a {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
+        }
+
+        .mc-markdown__img + em {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
+        }
+    }
+}

package/markdown/markdown.scss

@@ -80,13 +80,19 @@ $tokens: meta.module-variables(tokens) !default;
         padding: 0;
         counter-reset: li;
 
-        > li:before {
-            content:counter(li) ".";
-            counter-increment: li;
-            padding-right: var(
-                --mc-markdown-list-size-ol-number-padding-right,
-                map.get($tokens, markdown-list-size-ol-number-padding-right)
-            );
+        > li {
+            &:before {
+                content:counter(li) ".";
+                counter-increment: li;
+                padding-right: var(
+                    --mc-markdown-list-size-ol-number-padding-right,
+                    map.get($tokens, markdown-list-size-ol-number-padding-right)
+                );
+            }
+
+            > * {
+                display: inline-block;
+            }
         }
     }
 

package/modal/_modal-theme.nvl.scss

@@ -0,0 +1,90 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-modal-theme($theme) {
+    $tokens: map.get($theme, tokens);
+
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $modal: map.get(map.get($theme, components), modal);
+    $popup: map.get(map.get($theme, components), popup);
+
+    .mc-modal {
+        .mc-modal-content {
+            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
+            background-color: map.get($background, background);
+
+            box-shadow: map.get($modal, shadow);
+        }
+
+        .mc-modal-title {
+            color: map.get($foreground, text);
+        }
+
+        .mc-modal-header {
+            border-bottom-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-bottom-style: solid;
+            border-bottom-color: map.get($modal, header-border);
+        }
+
+        .mc-modal-header.mc-modal-body_top-overflow {
+            box-shadow: map.get($modal, body-top-shadow);
+        }
+
+        .mc-modal-footer.mc-modal-body_bottom-overflow {
+            box-shadow: map.get($modal, body-bottom-shadow);
+        }
+
+        .mc-modal-footer {
+            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-style: solid;
+            border-top-color: map.get($modal, footer-border);
+
+            background-color: map.get($popup, footer-background);
+        }
+
+        .mc-modal-close {
+            border: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width)) solid transparent;
+
+            &:hover {
+                .mc-button-overlay {
+                    background: map.get($background, overlay-hover);
+                }
+
+                .mc-icon {
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    .mc-modal-mask {
+        background-color: map.get($modal, background-mask);
+    }
+
+    .mc-confirm {
+        .mc-confirm-btns {
+            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-style: solid;
+            border-top-color: map.get($modal, footer-border);
+
+            background-color: map.get($popup, footer-background);
+        }
+    }
+}
+
+@mixin nvl-mc-modal-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-modal-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, modal-header-font-default));
+    }
+
+    .mc-modal-body {
+        @include mc-typography-level-to-styles($config, map.get($tokens, modal-body-font-default));
+    }
+}

package/navbar/_navbar-theme.nvl.scss

@@ -0,0 +1,123 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-navbar-theme($theme) {
+    $background: map.get($theme, background);
+    $primary: map.get($theme, theme);
+
+    $navbar: map.get(map.get($theme, components), navbar);
+    $navbar-item: map.get(map.get($theme, components), navbar-item);
+
+    .mc-navbar,
+    .mc-vertical-navbar .mc-vertical-navbar__container {
+        background-color: map.get($navbar, background);
+    }
+
+    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
+        background-color: map.get($navbar-item, state-hover);
+    }
+
+    .mc-navbar-brand.mc-vertical.mc-collapsed {
+        & .mc-navbar-logo:hover {
+            background-color: map.get($navbar-item, state-hover);
+        }
+    }
+
+    .mc-navbar-title {
+        color: map.get($navbar-item, color);
+    }
+
+    .mc-navbar-item,
+    .mc-navbar-brand,
+    .mc-navbar-toggle {
+        color: map.get($navbar-item, color);
+
+        & > .mc-icon {
+            color: map.get($navbar-item, icon-color);
+        }
+
+        & .mc-navbar-item__arrow-icon {
+            color: map.get($navbar-item, color);
+        }
+
+        &.mc-active {
+            background: map.get($navbar-item, state-selected);
+        }
+
+        &:hover:not(.mc-navbar-item_button) {
+            cursor: pointer;
+
+            & .mc-navbar-item__overlay {
+                background-color: map.get($navbar-item, state-hover);
+            }
+        }
+
+        &:active:not(.mc-navbar-item_button) {
+            & .mc-navbar-item__overlay {
+                background: map.get($navbar-item, state-active);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            cursor: default;
+
+            .mc-navbar-item__title,
+            .mc-icon {
+                opacity: map.get($navbar-item, state-disabled-opacity);
+            }
+        }
+    }
+
+    .mc-navbar-focusable-item {
+        outline: none;
+
+        /* stylelint-disable no-descending-specificity */
+        &.cdk-keyboard-focused .mc-navbar-item__overlay {
+            box-shadow:
+                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
+                inset 0 0 0 3px map.get($background, background);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .mc-navbar-divider {
+        background-color: map.get($navbar, divider-background);
+    }
+}
+
+button {
+    &.mc-navbar-item,
+    &.mc-navbar-brand,
+    &.mc-navbar-toggle {
+        background: transparent;
+        border: none;
+    }
+}
+
+@mixin nvl-mc-navbar-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-navbar-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+    }
+
+    .mc-navbar-subtitle {
+        @include mc-typography-level-to-styles($config, extra-small-text);
+    }
+
+    .mc-navbar-brand {
+        .mc-navbar-title {
+            @include mc-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
+
+            &.mc-navbar-title_small {
+                @include mc-typography-level-to-styles($config, subheading);
+
+                white-space: unset;
+            }
+        }
+    }
+}