@ptsecurity/mosaic 15.4.1 → 15.6.0

package/_theming.scss

@@ -1311,7 +1311,7 @@ $list-light-color-scheme-footer-background: white;
 $list-light-color-scheme-footer-divider: #d7dee4;
 $list-dark-color-scheme-footer-background: #19252f;
 $list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
-$list-size-horizontal-padding: 12px;
+$list-size-horizontal-padding: 10px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-size-footer-min-height: 48px;
@@ -1514,9 +1514,9 @@ $navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
-$optgroup-size-padding-left: 17px;
+$optgroup-size-padding-left: 12px;
 $optgroup-font-default: subheading;
-$option-size-horizontal-padding: 12px;
+$option-size-horizontal-padding: 10px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
@@ -1761,7 +1761,7 @@ $timezone-option-light-color-scheme-text: #19252f;
 $timezone-option-light-color-scheme-caption: #6d7a86;
 $timezone-option-dark-color-scheme-text: #d7dee4;
 $timezone-option-dark-color-scheme-caption: #8c99a5;
-$timezone-option-size-padding: 6px 8px 6px 14px;
+$timezone-option-size-padding: 6px 10px;
 $timezone-option-size-column-gap: 16px;
 $timezone-option-size-height: auto;
 $timezone-option-size-max-height: 4em;
@@ -3963,7 +3963,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $form-field-password-hint: (
         text-color: $form-field-password-hint-light-color-scheme-text-color,
-        icon-color: $form-field-password-hint-light-color-scheme-text-color,
+        icon-color: $form-field-password-hint-light-color-scheme-icon-color,
 
         state-invalid-text-color: $form-field-password-hint-light-color-scheme-states-invalid-text-color,
         state-invalid-icon-color: $form-field-password-hint-light-color-scheme-states-invalid-icon-color,
@@ -5556,7 +5556,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $form-field-password-hint: (
         text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
+        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-icon-color'),
 
         state-invalid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-text-color'),
         state-invalid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-icon-color'),
@@ -8029,7 +8029,7 @@ $mc-datepicker-today-fade-amount: 0.2;
         @include mc-typography-level-to-styles($config, $form-field-font-default);
     }
 
-    .mc-form-field__hint {
+    .mc-form-field__hint, .mc-password-hint {
         @include mc-typography-level-to-styles($config, $form-field-hint-font-default);
     }
 
@@ -8238,9 +8238,13 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-input.mc-input_monospace,
-    .mc-input.mc-input-password[type="password"] {
+    .mc-input.mc-input-password {
         @include mc-typography-level-to-styles($config, $input-font-monospace);
     }
+
+    .mc-input.mc-input-password::placeholder {
+        @include mc-typography-level-to-styles($config, $input-font-default);
+    }
 }
 
 
@@ -9177,25 +9181,25 @@ button {
     .mc-sidepanel-container_shadowed {
         &.mc-sidepanel-container_right {
             .mc-sidepanel-content {
-                box-shadow: 0 0 0 1px map-get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
+                box-shadow: -6px 0 12px 0 rgba(0, 0, 0, 0.24);
             }
         }
 
         &.mc-sidepanel-container_left {
             .mc-sidepanel-content {
-                box-shadow: 0 0 0 1px map-get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
+                box-shadow: 6px 0 12px 0 rgba(0, 0, 0, 0.24);
             }
         }
 
         &.mc-sidepanel-container_bottom {
             .mc-sidepanel-content {
-                box-shadow: 0 0 0 1px map-get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
+                box-shadow: 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
             }
         }
 
         &.mc-sidepanel-container_top {
             .mc-sidepanel-content {
-                box-shadow: 0 0 0 1px map-get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
+                box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.24);
             }
         }
     }

package/_visual.scss

@@ -1265,7 +1265,7 @@ $list-light-color-scheme-footer-background: white;
 $list-light-color-scheme-footer-divider: #d7dee4;
 $list-dark-color-scheme-footer-background: #19252f;
 $list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
-$list-size-horizontal-padding: 12px;
+$list-size-horizontal-padding: 10px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-size-footer-min-height: 48px;
@@ -1468,9 +1468,9 @@ $navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
-$optgroup-size-padding-left: 17px;
+$optgroup-size-padding-left: 12px;
 $optgroup-font-default: subheading;
-$option-size-horizontal-padding: 12px;
+$option-size-horizontal-padding: 10px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
@@ -1715,7 +1715,7 @@ $timezone-option-light-color-scheme-text: #19252f;
 $timezone-option-light-color-scheme-caption: #6d7a86;
 $timezone-option-dark-color-scheme-text: #d7dee4;
 $timezone-option-dark-color-scheme-caption: #8c99a5;
-$timezone-option-size-padding: 6px 8px 6px 14px;
+$timezone-option-size-padding: 6px 10px;
 $timezone-option-size-column-gap: 16px;
 $timezone-option-size-height: auto;
 $timezone-option-size-max-height: 4em;

package/button/_button-theme.scss

@@ -3,11 +3,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin mc-button-color($params) {
     color: map.get($params, color);
     border-color: map.get($params, border);
@@ -132,6 +127,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-button-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-button,
     .mc-icon-button {
         @include mc-typography-level-to-styles($config, map.get($tokens, button-font-default));

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

@@ -3,11 +3,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin mc-button-toggle-color($state) {
     & .mc-button-overlay {
         background: map.get($state, background);
@@ -80,6 +75,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-button-toggle-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-button-toggle {
         @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
 

package/checkbox/_checkbox-theme.scss

@@ -3,11 +3,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 /* stylelint-disable no-descending-specificity */
 @mixin mc-checkbox-color($states) {
     & .mc-checkbox-frame {
@@ -99,6 +94,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-checkbox-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-checkbox {
         @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-default));
     }

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

@@ -4,12 +4,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-
 @mixin mc-code-block-theme($theme) {
     $code-block: map.get(map.get($theme, components), code-block);
 
@@ -319,6 +313,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin 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));
 

package/core/forms/_forms-theme.scss

@@ -2,10 +2,6 @@
 @use 'sass:map';
 
 @use '../styles/typography' as *;
-@use '../styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-forms-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -22,6 +18,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin 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));
     }

package/core/option/_optgroup-theme.scss

@@ -2,10 +2,6 @@
 @use 'sass:map';
 
 @use '../styles/typography' as *;
-@use '../styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -20,6 +16,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin 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-theme.scss

@@ -3,11 +3,6 @@
 
 @use '../styles/typography' as *;
 
-@use '../styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin mc-option-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
@@ -40,6 +35,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin 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/styles/theming/_alerts.scss

@@ -2,10 +2,6 @@
 @use 'sass:map';
 
 @use '../typography/typography-utils' as *;
-@use '../tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .mc-alert {
     display: flex;
@@ -14,48 +10,9 @@ $tokens: meta.module-variables(tokens) !default;
     vertical-align: top;
     text-align: left;
 
-    border: var(--mc-alert-size-border-width, map.get($tokens, alert-size-border-width)) solid transparent;
-    border-radius: var(--mc-alert-size-border-radius, map.get($tokens, alert-size-border-radius));
-
     .mc-link {
         padding-left: 0;
     }
-
-    .mc-alert__icon {
-        margin-right: var(--mc-alert-size-icon-margin, map.get($tokens, alert-size-icon-margin));
-    }
-
-    padding: {
-        right: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
-        left: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
-    };
-
-    &:not(.mc-alert_small) {
-        padding: {
-            top: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
-            bottom: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
-        };
-    }
-
-    &.mc-alert_small {
-        padding: {
-            top: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
-            bottom: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
-        };
-    }
-
-    &.mc-alert_dismissible {
-        padding-right: calc(
-            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)})
-        );
-    }
 }
 
 .mc-alert_dismissible {
@@ -116,6 +73,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     .mc-alert {
         color: map.get($foreground, text);
+
+        @include mc-alert-geometry(map.get($theme, tokens));
     }
 
     .mc-alert_error {
@@ -139,7 +98,50 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+@mixin mc-alert-geometry($tokens) {
+    border: var(--mc-alert-size-border-width, map.get($tokens, alert-size-border-width)) solid transparent;
+    border-radius: var(--mc-alert-size-border-radius, map.get($tokens, alert-size-border-radius));
+
+    .mc-alert__icon {
+        margin-right: var(--mc-alert-size-icon-margin, map.get($tokens, alert-size-icon-margin));
+    }
+
+    padding: {
+        right: calc(
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
+            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
+        );
+        left: calc(
+            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
+            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
+        );
+    };
+
+    &:not(.mc-alert_small) {
+        padding: {
+            top: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
+            bottom: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
+        };
+    }
+
+    &.mc-alert_small {
+        padding: {
+            top: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
+            bottom: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
+        };
+    }
+
+    &.mc-alert_dismissible {
+        padding-right: calc(
+            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) {
+    $tokens: map-get($config, tokens);
+
     .mc-alert:not(.mc-alert_small) {
         @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-body));
 

package/core/styles/theming/_badges.scss

@@ -2,10 +2,6 @@
 @use 'sass:map';
 
 @use '../typography/typography-utils' as *;
-@use '../tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .mc-badge {
     display: inline-flex;
@@ -19,27 +15,6 @@ $tokens: meta.module-variables(tokens) !default;
     border-style: solid;
 
     box-sizing: border-box;
-
-    &.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));
-        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));
-        }
-    }
-
-    &.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));
-        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));
-        }
-
-    }
 }
 
 
@@ -56,8 +31,11 @@ $tokens: meta.module-variables(tokens) !default;
     .mc-badge {
         color: map.get($foreground, text);
         border-color: map.get($foreground, border);
+
     }
 
+    @include mc-badges-geometry(map.get($theme, tokens));
+
     .mc-badge_solid {
         &.mc-badge_primary {
             @include mc-badge-color(map.get($badge, primary_solid));
@@ -115,7 +93,33 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+@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));
+            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));
+            }
+        }
+
+        &.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));
+            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));
+            }
+        }
+    }
+}
+
 @mixin mc-badge-typography($config) {
+    $tokens: map-get($config, tokens);
+
     .mc-badge_default {
         @include mc-typography-level-to-styles($config, map.get($tokens, badge-font-default-default));
 

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

@@ -449,7 +449,7 @@
 
     $form-field-password-hint: (
         text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
-        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
+        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-icon-color'),
 
         state-invalid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-text-color'),
         state-invalid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-icon-color'),

package/core/styles/theming/_scrollbars.scss

@@ -2,41 +2,10 @@
 @use 'sass:map';
 
 @use '../functions/string' as *;
-@use '../tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .mc-scrollbar {
     //firefox
     scrollbar-width: auto;
-
-    // webkit
-    &::-webkit-scrollbar,
-    ::-webkit-scrollbar {
-        width: var(--mc-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
-    }
-
-    &::-webkit-scrollbar-thumb,
-    ::-webkit-scrollbar-thumb {
-        width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
-        border-width: var(
-            --mc-scrollbar-size-thumb-inset-border-width,
-            map.get($tokens, scrollbar-size-thumb-border-width)
-        );
-        border-radius: var(
-            --mc-scrollbar-size-thumb-inset-border-radius,
-            map.get($tokens, scrollbar-size-thumb-border-radius)
-        );
-    }
-
-    &::-webkit-scrollbar-button,
-    ::-webkit-scrollbar-button {
-        display: none;
-
-        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
-        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
-    }
 }
 
 @mixin mc-scrollbar-theme($theme) {
@@ -115,6 +84,36 @@ $tokens: meta.module-variables(tokens) !default;
             }
         }
         /* stylelint-enable */
+        @include mc-scrollbar-geometry(map.get($theme, tokens));
+    }
+}
+
+@mixin mc-scrollbar-geometry($tokens) {
+    // webkit
+    &::-webkit-scrollbar,
+    ::-webkit-scrollbar {
+        width: var(--mc-scrollbar-size-track-width, map.get($tokens, scrollbar-size-track-width));
+    }
+
+    &::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb {
+        width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        border-width: var(
+            --mc-scrollbar-size-thumb-inset-border-width,
+            map.get($tokens, scrollbar-size-thumb-border-width)
+        );
+        border-radius: var(
+            --mc-scrollbar-size-thumb-inset-border-radius,
+            map.get($tokens, scrollbar-size-thumb-border-radius)
+        );
+    }
+
+    &::-webkit-scrollbar-button,
+    ::-webkit-scrollbar-button {
+        display: none;
+
+        width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
+        height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
     }
 }
 

package/core/styles/theming/_theming.scss

@@ -127,7 +127,9 @@
 
         states: _theme_states($tokens, $scheme),
 
-        components: mc-components-theme($tokens, $scheme)
+        components: mc-components-theme($tokens, $scheme),
+
+        tokens: $tokens
     );
 }
 
@@ -150,6 +152,8 @@
 
         states: _theme_states($tokens, $scheme),
 
-        components: mc-components-theme($tokens, $scheme)
+        components: mc-components-theme($tokens, $scheme),
+
+        tokens: $tokens
     );
 }

package/core/styles/typography/_typography.scss

@@ -44,7 +44,7 @@
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family));
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
 }
 
 @function mc-markdown-typography-config($tokens) {
@@ -74,7 +74,7 @@
     }
 
     // Add the base font family to the config.
-    @return map.merge($config, (font-family: $font-family));
+    @return map.merge($config, (font-family: $font-family, tokens: $tokens));
 }
 
 
@@ -146,7 +146,7 @@
     .mc-caption_mono {
         @include mc-typography-level-to-styles($config, caption-mono);
     }
-    
+
     .mc-caption_mono_strong {
         @include mc-typography-level-to-styles($config, caption-mono-strong);
     }

package/datepicker/_datepicker-theme.scss

@@ -5,11 +5,6 @@
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 $mc-datepicker-selected-fade-amount: 0.6;
 $mc-datepicker-today-fade-amount: 0.2;
 
@@ -91,6 +86,8 @@ $mc-datepicker-today-fade-amount: 0.2;
 }
 
 @mixin mc-datepicker-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-calendar {
         @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
     }

package/dl/_dl-theme.scss

@@ -3,11 +3,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin mc-dl-theme($theme) {
     $dl: map.get(map.get($theme, components), dl);
 
@@ -21,6 +16,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-dl-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-dl {
         & .mc-dt {
             @include mc-typography-level-to-styles(

package/dropdown/_dropdown-theme.scss

@@ -5,11 +5,6 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin mc-dropdown-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
@@ -68,6 +63,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-dropdown-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-dropdown-item,
     .mc-dropdown__content {
         @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-default));