@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/code-block/_code-block-theme.nvl.scss

@@ -0,0 +1,326 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-code-block-theme($theme) {
+    $code-block: map.get(map.get($theme, components), code-block);
+
+    .mc-code-block {
+        background-color: map.get($code-block, main-background);
+        border-color: map.get($code-block, border);
+
+        .hljs {
+            $hljs: map.get($code-block, hljs);
+
+            display: block;
+            overflow-x: auto;
+
+            &-addition {
+                background-color: map.get($hljs, addition-background);
+                color: map.get($hljs, addition-color);
+            }
+
+            &-attr {
+                background-color: map.get($hljs, attr-background);
+                color: map.get($hljs, attr-color);
+            }
+
+            &-attribute {
+                background-color: map.get($hljs, attribute-background);
+                color: map.get($hljs, attribute-color);
+            }
+
+            &-built_in {
+                background-color: map.get($hljs, built_in-background);
+                color: map.get($hljs, built_in-color);
+            }
+
+            &-bullet {
+                background-color: map.get($hljs, bullet-background);
+                color: map.get($hljs, bullet-color);
+            }
+
+            &-char-escape {
+                background-color: map.get($hljs, char-escape-background);
+                color: map.get($hljs, char-escape-color);
+            }
+
+            &-class {
+                background-color: map.get($hljs, class-background);
+                color: map.get($hljs, class-color);
+            }
+
+            &-code {
+                background-color: map.get($hljs, code-background);
+                color: map.get($hljs, code-color);
+            }
+
+            &-comment {
+                background-color: map.get($hljs, comment-background);
+                color: map.get($hljs, comment-color);
+            }
+
+            &-deletion {
+                background-color: map.get($hljs, deletion-background);
+                color: map.get($hljs, deletion-color);
+            }
+
+            &-doctag {
+                background-color: map.get($hljs, doctag-background);
+                color: map.get($hljs, doctag-color);
+            }
+
+            &-emphasis {
+                background-color: map.get($hljs, emphasis-background);
+                color: map.get($hljs, emphasis-color);
+            }
+
+            &-formula {
+                background-color: map.get($hljs, formula-background);
+                color: map.get($hljs, formula-color);
+            }
+
+            &-function {
+                background-color: map.get($hljs, function-background);
+                color: map.get($hljs, function-color);
+            }
+
+            &-keyword {
+                background-color: map.get($hljs, keyword-background);
+                color: map.get($hljs, keyword-color);
+            }
+
+            &-link {
+                background-color: map.get($hljs, link-background);
+                color: map.get($hljs, link-color);
+            }
+
+            &-literal {
+                background-color: map.get($hljs, literal-background);
+                color: map.get($hljs, literal-color);
+            }
+
+            &-meta {
+                background-color: map.get($hljs, meta-background);
+                color: map.get($hljs, meta-color);
+            }
+
+            &-meta-keyword {
+                background-color: map.get($hljs, meta-keyword-background);
+                color: map.get($hljs, meta-keyword-color);
+            }
+
+            &-meta-string {
+                background-color: map.get($hljs, meta-string-background);
+                color: map.get($hljs, meta-string-color);
+            }
+
+            &-meta-prompt {
+                background-color: map.get($hljs, meta-prompt-background);
+                color: map.get($hljs, meta-prompt-color);
+            }
+
+            &-name {
+                background-color: map.get($hljs, name-background);
+                color: map.get($hljs, name-color);
+            }
+
+            &-number {
+                background-color: map.get($hljs, number-background);
+                color: map.get($hljs, number-color);
+            }
+
+            &-operator {
+                background-color: map.get($hljs, operator-background);
+                color: map.get($hljs, operator-color);
+            }
+
+            &-params {
+                background-color: map.get($hljs, params-background);
+                color: map.get($hljs, params-color);
+            }
+
+            &-property {
+                background-color: map.get($hljs, property-background);
+                color: map.get($hljs, property-color);
+            }
+
+            &-punctuation {
+                background-color: map.get($hljs, punctuation-background);
+                color: map.get($hljs, punctuation-color);
+            }
+
+            &-quote {
+                background-color: map.get($hljs, quote-background);
+                color: map.get($hljs, quote-color);
+            }
+
+            &-regexp {
+                background-color: map.get($hljs, regexp-background);
+                color: map.get($hljs, regexp-color);
+            }
+
+            &-section {
+                background-color: map.get($hljs, section-background);
+                color: map.get($hljs, section-color);
+            }
+
+            &-selector-attr {
+                background-color: map.get($hljs, selector-attr-background);
+                color: map.get($hljs, selector-attr-color);
+            }
+
+            &-selector-class {
+                background-color: map.get($hljs, selector-class-background);
+                color: map.get($hljs, selector-class-color);
+            }
+
+            &-selector-id {
+                background-color: map.get($hljs, selector-id-background);
+                color: map.get($hljs, selector-id-color);
+            }
+
+            &-selector-pseudo {
+                background-color: map.get($hljs, selector-pseudo-background);
+                color: map.get($hljs, selector-pseudo-color);
+            }
+
+            &-selector-tag {
+                background-color: map.get($hljs, selector-tag-background);
+                color: map.get($hljs, selector-tag-color);
+            }
+
+            &-string {
+                background-color: map.get($hljs, string-background);
+                color: map.get($hljs, string-color);
+            }
+
+            &-strong {
+                background-color: map.get($hljs, strong-background);
+                color: map.get($hljs, strong-color);
+            }
+
+            &-subst {
+                background-color: map.get($hljs, subst-background);
+                color: map.get($hljs, subst-color);
+            }
+
+            &-symbol {
+                background-color: map.get($hljs, symbol-background);
+                color: map.get($hljs, symbol-color);
+            }
+
+            &-tag {
+                background-color: map.get($hljs, tag-background);
+                color: map.get($hljs, tag-color);
+            }
+
+            &-template-tag {
+                background-color: map.get($hljs, template-tag-background);
+                color: map.get($hljs, template-tag-color);
+            }
+
+            &-template-variable {
+                background-color: map.get($hljs, template-variable-background);
+                color: map.get($hljs, template-variable-color);
+            }
+
+            &-title {
+                background-color: map.get($hljs, title-background);
+                color: map.get($hljs, title-color);
+            }
+
+            &-title-class {
+                background-color: map.get($hljs, title-class-background);
+                color: map.get($hljs, title-class-color);
+            }
+
+            &-title-class-inherited {
+                background-color: map.get($hljs, title-class-inherited-background);
+                color: map.get($hljs, title-class-inherited-color);
+            }
+
+            &-title-function {
+                background-color: map.get($hljs, title-function-background);
+                color: map.get($hljs, title-function-color);
+            }
+
+            &-title-function-invoke {
+                background-color: map.get($hljs, title-function-invoke-background);
+                color: map.get($hljs, title-function-invoke-color);
+            }
+
+            &-type {
+                background-color: map.get($hljs, type-background);
+                color: map.get($hljs, type-color);
+            }
+
+            &-variable {
+                background-color: map.get($hljs, variable-background);
+                color: map.get($hljs, variable-color);
+            }
+
+            &-variable-constant {
+                background-color: map.get($hljs, variable-constant-background);
+                color: map.get($hljs, variable-constant-color);
+            }
+
+            &-variable-language {
+                background-color: map.get($hljs, variable-language-background);
+                color: map.get($hljs, variable-language-color);
+            }
+
+            &-ln-n {
+                color: map.get($code-block, line-numbers-color);
+            }
+
+            &-line-numbers {
+                color: map.get($code-block, main-code-color);
+            }
+        }
+
+        &.mc-code-block_less-contrast {
+            background-color: map.get($code-block, main-background-less-contrast);
+        }
+
+        .mc-tab-group:after {
+            background: map.get($code-block, border);
+        }
+
+        .mc-tab-header {
+            & .mc-tab-label.mc-tab-label_horizontal,
+            & .mc-tab-header__pagination {
+                border-bottom-color: transparent;
+            }
+        }
+
+        .mc-code-block__show-more {
+            border-top-color: map.get($code-block, border) !important;
+        }
+    }
+
+    .mc-code-block-actionbar {
+        .mc-code-block-actionbar_less-contrast {
+            background-color: map-get($code-block, actionbar, bg-less-contrast);
+        }
+
+        &.mc-actionbar-block_floating {
+            background-color: map-get($code-block, actionbar, bg);
+        }
+    }
+}
+
+@mixin nvl-mc-code-block-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-code-block {
+        @include mc-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+
+        .hljs-ln-numbers {
+            @include mc-typography-level-to-styles($config, caption-mono);
+        }
+    }
+}

package/core/common-behaviors/color.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
 export interface CanColor {
-    color: ThemePalette;
+    color: KbqComponentColors | ThemePalette;
 }
 /** @docs-private */
 export declare type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;
@@ -18,5 +18,16 @@ export declare enum ThemePalette {
     Default = "secondary",
     Empty = ""
 }
+export declare enum KbqComponentColors {
+    Theme = "theme",
+    ThemeFade = "theme-fade",
+    Contrast = "contrast",
+    ContrastFade = "contrast-fade",
+    Error = "error",
+    Warning = "warning",
+    Success = "success",
+    Default = "contrast",
+    Empty = ""
+}
 /** Mixin to augment a directive with a `color` property. */
-export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: ThemePalette): CanColorCtor & T;
+export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: KbqComponentColors | ThemePalette): CanColorCtor & T;

package/core/common-behaviors/index.d.ts

@@ -1,5 +1,5 @@
 export { McCommonModule, MC_SANITY_CHECKS } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
-export { CanColor, CanColorCtor, mixinColor, ThemePalette } from './color';
+export { CanColor, CanColorCtor, mixinColor, ThemePalette, KbqComponentColors } from './color';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export { CanUpdateErrorStateCtor, CanUpdateErrorState, mixinErrorState } from './error-state';

package/core/forms/_forms-theme.nvl.scss

@@ -0,0 +1,31 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-forms-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $forms: map.get(map.get($theme, components), forms);
+
+    .mc-form__label {
+        color: map.get($forms, label);
+    }
+
+    .mc-form__legend {
+        color: map.get($forms, legend);
+    }
+}
+
+@mixin nvl-mc-forms-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-form__label {
+        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+    }
+
+    .mc-form__legend {
+        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+    }
+}

package/core/highlight/_highlight-theme.nvl.scss

@@ -0,0 +1,8 @@
+@mixin nvl-mc-highlight-theme($theme) {
+    .mc-highlight {
+        color: inherit;
+
+        font-weight: bold;
+        background-color: transparent;
+    }
+}

package/core/highlight/_highlight-theme.scss

@@ -1,5 +1,3 @@
-
-
 @mixin mc-highlight-theme($theme) {
     .mc-highlight {
         color: inherit;

package/core/option/_optgroup-theme.nvl.scss

@@ -0,0 +1,25 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-optgroup-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-optgroup-label {
+        color: map.get($foreground, text);
+    }
+
+    .mc-disabled .mc-optgroup-label {
+        color: map.get($foreground, text-disabled);
+    }
+}
+
+@mixin nvl-mc-optgroup-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-optgroup-label {
+        @include mc-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+    }
+}

package/core/option/_option-action-theme.nvl.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+@use '../styles/theming/theming' as *;
+@use '../styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-option-action-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $secondary: map.get($theme, secondary);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-option-action {
+        &.cdk-keyboard-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &:active,
+        &.mc-pressed {
+            & .mc-icon {
+                color: mc-color($secondary, if($is-dark, 70, 30));
+            }
+
+            background-color: mc-color($secondary, A16);
+        }
+
+        &:hover .mc-icon {
+            color: mc-color($secondary, if($is-dark, 70, 30));
+        }
+
+        &[disabled] {
+            & .mc-icon {
+                color: mc-color($secondary, if($is-dark, 30, 70));
+            }
+
+            background-color: transparent;
+        }
+    }
+}

package/core/option/_option-theme.nvl.scss

@@ -0,0 +1,44 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-option-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, theme);
+
+    .mc-option {
+        color: map.get($foreground, text);
+
+        &:hover:not(.mc-disabled) {
+            .mc-option-overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.mc-active {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &.mc-disabled {
+            background: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin nvl-mc-option-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, option-font-default));
+    }
+}

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.nvl.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+
+
+@mixin nvl-mc-pseudo-checkbox-color($checkbox) {
+    $default: map.get($checkbox, default);
+
+    border-color: map.get($default, border);
+
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        color: map.get($default, color);
+    }
+
+    &.mc-checked,
+    &.mc-indeterminate {
+        $checked: map.get($checkbox, checked);
+
+        border-color: map.get($checked, border);
+        background: map.get($checked, background);
+    }
+
+    &.mc-disabled {
+        $disabled: map.get($checkbox, disabled);
+
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map.get($disabled, color);
+        }
+
+        border-color: map.get($disabled, border);
+        background: map.get($disabled, background);
+    }
+}
+
+@mixin nvl-mc-pseudo-checkbox-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $checkbox: map.get(map.get($theme, components), checkbox);
+
+    .mc-pseudo-checkbox {
+        @include nvl-mc-pseudo-checkbox-color(map.get($checkbox, theme));
+
+        &.mc-error {
+            @include nvl-mc-pseudo-checkbox-color(map.get($checkbox, error));
+        }
+    }
+}

package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts

@@ -23,9 +23,10 @@ export declare const McPseudoCheckboxMixinBase: CanColorCtor & CanDisableCtor &
  * @docs-private
  */
 export declare class McPseudoCheckbox extends McPseudoCheckboxMixinBase implements CanColor, CanDisable {
+    big: boolean;
     state: McPseudoCheckboxState;
     disabled: boolean;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<McPseudoCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McPseudoCheckbox, "mc-pseudo-checkbox", never, { "color": "color"; "state": "state"; "disabled": "disabled"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPseudoCheckbox, "mc-pseudo-checkbox", never, { "color": "color"; "big": "big"; "state": "state"; "disabled": "disabled"; }, {}, never, never, false, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -11,12 +11,12 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
     box-sizing: border-box;
 
-    width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
-    height: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+    width: var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    height: var(--mc-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
 
     border: {
-        radius: 3px;
-        width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));
+        radius: var(--mc-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+        width: var(--mc-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
         style: solid;
     }
 
@@ -30,8 +30,12 @@ $tokens: meta.module-variables(tokens) !default;
         display: none;
 
         position: absolute;
-        top: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
-        left: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
+        top: calc(
+            -1 * var(--mc-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
+        );
+        left: calc(
+            -1 * var(--mc-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
+        );
     }
 
     &.mc-pseudo-checkbox-checked,
@@ -55,3 +59,19 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: default;
     }
 }
+
+.mc-pseudo-checkbox.mc-pseudo-checkbox_big {
+    width: var(--mc-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    height: var(--mc-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+
+    border: {
+        radius: var(--mc-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
+        width: var(--mc-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+    }
+
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        top: calc(-1 * var(--mc-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
+        left: calc(-1 * var(--mc-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
+    }
+}