@ptsecurity/mosaic 17.2.0 → 17.3.0

package/autocomplete/_autocomplete-theme.scss

@@ -11,10 +11,10 @@
     .mc-autocomplete-panel {
         @include popup.popup-params($theme);
 
-        color: theming.mc-color($foreground, text);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
 
         .mc-selected {
-            $popup: map.get(map.get($theme, components), popup);
+            $popup: map.get($theme, components, popup);
 
             background-color: mc-css-variable(popup-background, map-get($popup, background));
         }

package/autocomplete/autocomplete.scss

@@ -4,8 +4,6 @@
 @use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-autocomplete-trigger {
     text-overflow: ellipsis;
 }

package/button/_button-theme.scss

@@ -131,14 +131,14 @@
 @mixin mc-button-typography($config) {
     .mc-button,
     .mc-icon-button {
-        @include mc-typography-css-variables(button, default);
+        @include mc-typography-css-variables($config, button, default);
 
         &.mc-primary {
-            @include mc-typography-css-variables(button, primary);
+            @include mc-typography-css-variables($config, button, primary);
         }
 
         &.mc-primary.mc-button_transparent {
-            @include mc-typography-css-variables(button, primary-transparent);
+            @include mc-typography-css-variables($config, button, primary-transparent);
         }
     }
 

package/button-toggle/_button-toggle-theme.scss

@@ -86,11 +86,11 @@
     $tokens: map.get($config, tokens);
 
     .mc-button-toggle {
-        @include mc-typography-css-variables(button-toggle, default);
+        @include mc-typography-css-variables($config, button-toggle, default);
 
         > .mc-button,
         > .mc-icon-button {
-            @include mc-typography-css-variables(button-toggle, default);
+            @include mc-typography-css-variables($config, button-toggle, default);
         }
     }
 }

package/button-toggle/button-toggle.scss

@@ -14,7 +14,7 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: map.get($tokens, size-3xs);
+    gap: mc-css-variable(size-3xs);
 
     border-width: mc-css-variable(button-toggle-group-size-border-width);
     border-radius: mc-css-variable(button-toggle-group-size-border-radius);
@@ -63,7 +63,7 @@ $tokens: meta.module-variables(tokens) !default;
                 padding-left: mc-css-variable(button-toggle-size-left-icon-padding);
 
                 & .mc-icon {
-                    margin-right: map.get($tokens, size-xxs);
+                    margin-right: mc-css-variable(size-xxs);
                 }
             }
         }

package/checkbox/_checkbox-theme.scss

@@ -105,6 +105,6 @@
 
 @mixin mc-checkbox-typography($config) {
     .mc-checkbox {
-        @include mc-typography-css-variables(checkbox, default);
+        @include mc-typography-css-variables($config, checkbox, default);
     }
 }

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

@@ -6,7 +6,7 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin mc-code-block-theme($theme) {
-    $code-block: map.get(map.get($theme, components), code-block);
+    $code-block: map.get($theme, components, code-block);
 
     .mc-code-block {
         background-color: mc-css-variable(code-block-main-background, map-get($code-block, main-background));
@@ -404,7 +404,7 @@
     $tokens: map.get($config, tokens);
 
     .mc-code-block {
-        @include mc-typography-css-variables(code-block, default);
+        @include mc-typography-css-variables($config, code-block, default);
 
         & .mc-code-block__code {
             font: inherit;
@@ -415,7 +415,7 @@
         }
 
         & .hljs-ln-numbers {
-            @include mc-typography-level-to-styles($config, caption-mono);
+            @include mc-typography-level-to-styles_css-variables($config, typography, caption-mono);
         }
     }
 }

package/core/form-field/form-field-ref.d.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+export interface McFormFieldRef {
+    control: any;
+    canCleanerClearByEsc: boolean;
+    shouldForward(str: string): boolean;
+    focusViaKeyboard(): void;
+}
+/**
+ * Injection token that can be used to inject an instances of `McFormField`. It serves
+ * as alternative token to the actual `McFormField` class which would cause unnecessary
+ * retention of the `McFormField` class and its component metadata.
+ */
+export declare const MC_FORM_FIELD_REF: InjectionToken<McFormFieldRef>;

package/core/form-field/index.d.ts

@@ -0,0 +1 @@
+export * from './form-field-ref';

package/core/forms/_forms-theme.scss

@@ -91,7 +91,7 @@
 
     $foreground: map.get($theme, foreground);
 
-    $forms: map.get(map.get($theme, components), forms);
+    $forms: map.get($theme, components, forms);
 
     .mc-form__label {
         color: map.get($forms, label);
@@ -104,10 +104,10 @@
 
 @mixin mc-forms-typography($config) {
     .mc-form__label {
-        @include mc-typography-css-variables(forms, default-label);
+        @include mc-typography-css-variables($config, forms, default-label);
     }
 
     .mc-form__legend {
-        @include mc-typography-css-variables(forms, default-legend);
+        @include mc-typography-css-variables($config, forms, default-legend);
     }
 }

package/core/option/_optgroup-theme.scss

@@ -19,6 +19,6 @@
 
 @mixin mc-optgroup-typography($config) {
     .mc-optgroup-label {
-        @include mc-typography-css-variables(optgroup, default);
+        @include mc-typography-css-variables($config, optgroup, default);
     }
 }

package/core/option/_option-theme.scss

@@ -36,6 +36,6 @@
 
 @mixin mc-option-typography($config) {
     .mc-option {
-        @include mc-typography-css-variables(option, default);
+        @include mc-typography-css-variables($config, option, default);
     }
 }

package/core/public-api.d.ts

@@ -4,6 +4,7 @@ export * from './datetime/index';
 export * from './error/error-options';
 export * from './formatters/index';
 export * from './forms/index';
+export * from './form-field/index';
 export * from './highlight/index';
 export * from './label/label-options';
 export * from './line/line';

package/core/select/common.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { McFormFieldRef } from '../form-field';
+import * as i0 from "@angular/core";
+export declare class McSelectFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSelectFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectFooter, "mc-select-footer, [mc-select-footer]", never, {}, {}, never, never, true, never>;
+}
+export declare class McSelectSearch implements AfterContentInit, OnDestroy {
+    protected formField: McFormFieldRef;
+    searchChangesSubscription: Subscription;
+    isSearchChanged: boolean;
+    get ngControl(): any;
+    constructor(formField: McFormFieldRef);
+    focus(): void;
+    reset(): void;
+    value(): any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSelectSearch, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearch, "[mcSelectSearch]", ["mcSelectSearch"], {}, {}, never, never, true, never>;
+}
+export declare class McSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearchEmptyResult, "[mc-select-search-empty-result]", ["mcSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}
+export declare class McSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectTrigger, "mc-select-trigger, [mc-select-trigger]", never, {}, {}, never, never, true, never>;
+}
+export declare class McSelectMatcher {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSelectMatcher, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectMatcher, "mc-select-matcher, [mc-select-matcher]", never, {}, {}, never, never, true, never>;
+}

package/core/select/index.d.ts

@@ -1,3 +1,4 @@
 export * from './events';
 export * from './errors';
 export * from './constants';
+export * from './common';

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

@@ -1,19 +1,23 @@
 @use 'sass:map';
 
+@use '../../styles/common/tokens' as *;
 
-@mixin mc-pseudo-checkbox-color($states) {
-    border-color: map.get($states, border);
+
+@mixin mc-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    border-color: mc-css-variable(checkbox-#{$style-name}-border, map.get($style, border));
 
     & .mc-checkbox-checkmark,
     & .mc-checkbox-mixedmark {
-        color: map.get($states, color);
+        color: mc-css-variable(checkbox-#{$style-name}-color, map.get($style, color));
     }
 
     &.mc-checked,
     &.mc-indeterminate {
-        border-color: map.get($states, checked, border);
+        border-color: mc-css-variable(checkbox-#{$style-name}-checked-border, map.get($style, checked, border));
 
-        background: map.get($states, checked, background);
+        background: mc-css-variable(checkbox-#{$style-name}-checked-background, map.get($style, checked, background));
     }
 }
 
@@ -21,27 +25,28 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .mc-pseudo-checkbox {
         &.mc-primary {
-            @include mc-pseudo-checkbox-color(map.get($checkbox, default));
+            @include mc-pseudo-checkbox-color($checkbox, default);
         }
 
         &.mc-error {
-            @include mc-pseudo-checkbox-color(map.get($checkbox, error));
+            @include mc-pseudo-checkbox-color($checkbox, error);
         }
 
         &.mc-disabled,
         &.mc-primary.mc-disabled,
         &.mc-error.mc-disabled {
-            border-color: map.get($foreground, border);
+            border-color: mc-css-variable(foreground-border, map.get($foreground, border));
 
-            background-color: map.get($background, background-disabled);
+            background-color: mc-css-variable(
+                background-background-disabled, map.get($background, background-disabled));
 
             & .mc-checkbox-checkmark,
             & .mc-checkbox-mixedmark {
-                color: map.get($foreground, text-disabled);
+                color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
             }
         }
     }

package/core/styles/common/_groups.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use '../common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: mc-css-variable(button-size-border-radius);
 
             > .mc-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,7 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-bottom-left-radius: mc-css-variable(button-size-border-radius);
 
             > .mc-form-field__container {
                 @include border-top-radius(0);

package/core/styles/common/_popup.scss

@@ -3,7 +3,7 @@
 
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
     box-shadow: mc-css-variable(popup-shadow, map-get($popup, shadow));
     border-color: mc-css-variable(popup-border, map-get($popup, border));

package/core/styles/common/_tokens.scss

@@ -6,34 +6,53 @@
 @use '../tokens';
 
 
-$tokens: meta.module-variables(tokens);
+$default-tokens: meta.module-variables(tokens);
 
 
 @function mc-css-variable($name, $value: null) {
     @if $value {
         @return var(--mc-#{$name}, $value);
     } @else {
-        @return var(--mc-#{$name}, map.get($tokens, $name));
+        @return var(--mc-#{$name}, map.get($default-tokens, $name));
     }
 }
 
 @function getToken($name) {
-    @return map.get($tokens, $name);
+    @return map.get($default-tokens, $name);
 }
 
-@mixin mc-css-font-variable($component, $component-property, $font-property) {
+@mixin mc-css-font-variable($tokens, $component, $component-property, $font-property, $font) {
     #{$font-property}: var(
-        --mc-#{$component}-font-#{$component-property}-#{$font-property},
-        map.get($tokens, #{$component}-font-#{$component-property}-#{$font-property})
+        --mc-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
     );
+    //@debug '_____________________________________________________________';
+    //@debug #{$component}-#{$font}#{$component-property}-#{$font-property};
+    //@debug '_____________________________________________________________';
+    //@debug $tokens;
 }
 
-@mixin mc-typography-css-variables($component, $property) {
-    @include mc-css-font-variable($component, $property, font-size);
-    @include mc-css-font-variable($component, $property, font-weight);
-    @include mc-css-font-variable($component, $property, line-height);
-    @include mc-css-font-variable($component, $property, font-family);
-    @include mc-css-font-variable($component, $property, text-transform);
-    @include mc-css-font-variable($component, $property, font-feature-settings);
-    @include mc-css-font-variable($component, $property, letter-spacing);
+@mixin mc-typography-css-variables($config, $component, $property) {
+    //@debug 'mc-typography-css-variables';
+    $tokens: map.get($config, tokens);
+
+    @include mc-css-font-variable($tokens, $component, $property, font-size, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-weight, font-);
+    @include mc-css-font-variable($tokens, $component, $property, line-height, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-family, font-);
+    @include mc-css-font-variable($tokens, $component, $property, text-transform, font-);
+    @include mc-css-font-variable($tokens, $component, $property, font-feature-settings, font-);
+    @include mc-css-font-variable($tokens, $component, $property, letter-spacing, font-);
+}
+
+@mixin mc-typography-level-to-styles_css-variables($config, $component, $property) {
+    $tokens: map.get($config, tokens);
+
+    @include mc-css-font-variable($tokens, $component, $property, font-size, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-weight, '');
+    @include mc-css-font-variable($tokens, $component, $property, line-height, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-family, '');
+    @include mc-css-font-variable($tokens, $component, $property, text-transform, '');
+    @include mc-css-font-variable($tokens, $component, $property, font-feature-settings, '');
+    @include mc-css-font-variable($tokens, $component, $property, letter-spacing, '');
 }

package/core/styles/theming/_alerts.scss

@@ -52,50 +52,50 @@
     }
 }
 
-@mixin alert-theme($alert) {
-    background-color: map.get($alert, background);
-    border-color: map.get($alert, border);
+@mixin alert-theme($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    background-color: mc-css-variable(alert-#{$style-name}-background, map.get($style, background));
+    border-color: mc-css-variable(alert-#{$style-name}-border, map.get($style, border));
 
     .mc-icon.mc-alert__icon {
-        color: map.get($alert, icon);
+        color: mc-css-variable(alert-#{$style-name}-icon, map.get($style, icon));
     }
 }
 
 @mixin mc-alert-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $alert: map.get(map.get($theme, components), alert);
-
-    $is-dark: map.get($theme, is-dark);
+    $alert: map.get($theme, components, alert);
 
     .mc-alert__close:focus {
         outline: none;
     }
 
     .mc-alert {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
 
         @include mc-alert-geometry(map.get($theme, tokens));
     }
 
     .mc-alert_error {
-        @include alert-theme(map.get($alert, error));
+        @include alert-theme($alert, error);
     }
 
     .mc-alert_warning {
-        @include alert-theme(map.get($alert, warning));
+        @include alert-theme($alert, warning);
     }
 
     .mc-alert_success {
-        @include alert-theme(map.get($alert, success));
+        @include alert-theme($alert, success);
     }
 
     .mc-alert_info {
-        @include alert-theme(map.get($alert, info));
+        @include alert-theme($alert, info);
     }
 
     .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
-        @include alert-theme(map.get($alert, default));
+        @include alert-theme($alert, default);
     }
 }
 
@@ -128,29 +128,30 @@
 
     &.mc-alert_dismissible {
         padding-right: calc(
-            mc-css-variable(alert-size-right-padding-dismissible) + mc-css-variable(alert-size-horizontal-padding)
+            var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
         );
     }
 }
 
 @mixin mc-alert-typography($config) {
     .mc-alert:not(.mc-alert_small) {
-        @include mc-typography-css-variables(alert, default-body);
+        @include mc-typography-css-variables($config, alert, default-body);
 
         header {
-            @include mc-typography-css-variables(alert, default-header);
+            @include mc-typography-css-variables($config, alert, default-header);
         }
     }
 
     .mc-alert.mc-alert_small {
-        @include mc-typography-css-variables(alert, small-body);
+        @include mc-typography-css-variables($config, alert, small-body);
 
         header {
-            @include mc-typography-css-variables(alert, small-header);
+            @include mc-typography-css-variables($config, alert, small-header);
         }
 
         .mc-link__text {
-            @include mc-typography-css-variables(alert, small-body);
+            @include mc-typography-css-variables($config, alert, small-body);
         }
     }
 

package/core/styles/theming/_badges.scss

@@ -19,19 +19,21 @@
 }
 
 
-@mixin mc-badge-color($params) {
-    color: map.get($params, color);
-    border-color: map.get($params, border);
-    background: map.get($params, background);
+@mixin mc-badge-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    color: mc-css-variable(badge-#{$style-name}-color, map.get($style, color));
+    border-color: mc-css-variable(badge-#{$style-name}-border, map.get($style, border));
+    background: mc-css-variable(badge-#{$style-name}-background, map.get($style, background));
 }
 
 @mixin mc-badge-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $badge: map.get(map.get($theme, components), badge);
+    $badge: map.get($theme, components, badge);
 
     .mc-badge {
-        color: map.get($foreground, text);
-        border-color: map.get($foreground, border);
+        color: mc-css-variable(foreground-text, map.get($foreground, text));
+        border-color: mc-css-variable(foreground-border, map.get($foreground, border));
 
     }
 
@@ -39,57 +41,57 @@
 
     .mc-badge_solid {
         &.mc-badge_primary {
-            @include mc-badge-color(map.get($badge, primary_solid));
+            @include mc-badge-color($badge, solid-primary);
         }
 
         &.mc-badge_second {
-            @include mc-badge-color(map.get($badge, second_solid));
+            @include mc-badge-color($badge, solid-secondary);
         }
 
         &.mc-badge_transparent {
-            @include mc-badge-color(map.get($badge, transparent_solid));
+            @include mc-badge-color($badge, solid-transparent);
         }
 
         &.mc-badge_success {
-            @include mc-badge-color(map.get($badge, success_solid));
+            @include mc-badge-color($badge, solid-success);
         }
 
         &.mc-badge_info {
-            @include mc-badge-color(map.get($badge, info_solid));
+            @include mc-badge-color($badge, solid-info);
         }
 
         &.mc-badge_warning {
-            @include mc-badge-color(map.get($badge, warning_solid));
+            @include mc-badge-color($badge, solid-warning);
         }
 
         &.mc-badge_error {
-            @include mc-badge-color(map.get($badge, error_solid));
+            @include mc-badge-color($badge, solid-error);
         }
 
         &.mc-badge_light {
-            @include mc-badge-color(map.get($badge, light_solid));
+            @include mc-badge-color($badge, solid-light);
         }
     }
 
     .mc-badge_pastel {
         &.mc-badge_primary {
-            @include mc-badge-color(map.get($badge, primary_pastel));
+            @include mc-badge-color($badge, pastel-primary);
         }
 
         &.mc-badge_success {
-            @include mc-badge-color(map.get($badge, success_pastel));
+            @include mc-badge-color($badge, pastel-success);
         }
 
         &.mc-badge_info {
-            @include mc-badge-color(map-get($badge, info_pastel));
+            @include mc-badge-color($badge, pastel-info);
         }
 
         &.mc-badge_warning {
-            @include mc-badge-color(map.get($badge, warning_pastel));
+            @include mc-badge-color($badge, pastel-warning);
         }
 
         &.mc-badge_error {
-            @include mc-badge-color(map.get($badge, error_pastel));
+            @include mc-badge-color($badge, pastel-error);
         }
     }
 }
@@ -97,22 +99,22 @@
 @mixin mc-badges-geometry($tokens) {
     .mc-badge {
         &.mc-badge_default {
-            height: var(--mc-badge-size-default-height, map.get($tokens, badge-size-default-height));
-            min-width: var(--mc-badge-size-default-min-width, map.get($tokens, badge-size-default-min-width));
-            padding: var(--mc-badge-size-default-padding, map.get($tokens, badge-size-default-padding));
+            height: mc-css-variable(badge-size-default-height);
+            min-width: mc-css-variable(badge-size-default-min-width);
+            padding: mc-css-variable(badge-size-default-padding);
             border: {
-                width: var(--mc-badge-size-default-border-width, map.get($tokens, badge-size-default-border-width));
-                radius: var(--mc-badge-size-default-border-radius, map.get($tokens, badge-size-default-border-radius));
+                width: mc-css-variable(badge-size-default-border-width);
+                radius: mc-css-variable(badge-size-default-border-radius);
             }
         }
 
         &.mc-badge_mini {
-            height: var(--mc-badge-size-mini-height, map.get($tokens, badge-size-mini-height));
-            min-width: var(--mc-badge-size-mini-min-width, map.get($tokens, badge-size-mini-min-width));
-            padding: var(--mc-badge-size-mini-padding, map.get($tokens, badge-size-mini-padding));
+            height: mc-css-variable(badge-size-mini-height);
+            min-width: mc-css-variable(badge-size-mini-min-width);
+            padding: mc-css-variable(badge-size-mini-padding);
             border: {
-                width: var(--mc-badge-size-mini-border-width, map.get($tokens, badge-size-mini-border-width));
-                radius: var(--mc-badge-size-mini-border-radius, map.get($tokens, badge-size-mini-border-radius));
+                width: mc-css-variable(badge-size-mini-border-width);
+                radius: mc-css-variable(badge-size-mini-border-radius);
             }
         }
     }
@@ -120,26 +122,26 @@
 
 @mixin mc-badge-typography($config) {
     .mc-badge_default {
-        @include mc-typography-css-variables(badge, default-default);
+        @include mc-typography-css-variables($config, badge, default-default);
 
         &.mc-badge_caps {
-            @include mc-typography-css-variables(badge, default-caps);
+            @include mc-typography-css-variables($config, badge, default-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-css-variables(badge, default-mono);
+            @include mc-typography-css-variables($config, badge, default-mono);
         }
     }
 
     .mc-badge_mini {
-        @include mc-typography-css-variables(badge, mini-default);
+        @include mc-typography-css-variables($config, badge, mini-default);
 
         &.mc-badge_caps {
-            @include mc-typography-css-variables(badge, mini-caps);
+            @include mc-typography-css-variables($config, badge, mini-caps);
         }
 
         &.mc-badge_mono {
-            @include mc-typography-css-variables(badge, mini-mono);
+            @include mc-typography-css-variables($config, badge, mini-mono);
         }
     }
 }