@ptsecurity/mosaic 14.6.2 → 14.7.1

package/_theming.scss

@@ -152,83 +152,107 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 }
 
-@mixin cdk-a11y {
-    .cdk-visually-hidden {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
+/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
+/// to make that element visually hidden while remaining available to assistive technology.
+@mixin a11y-visually-hidden() {
+  .cdk-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
 
-        // Avoid browsers rendering the focus ring in some cases.
-        outline: 0;
+    // This works around a Chrome bug that can cause the tab to crash when large amounts of
+    // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
+    white-space: nowrap;
+
+    // Avoid browsers rendering the focus ring in some cases.
+    outline: 0;
 
-        // Avoid some cases where the browser will still render the native controls (see #9049).
-        -webkit-appearance: none;
-        -moz-appearance: none;
+    // Avoid some cases where the browser will still render the native controls (see #9049).
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    // We need at least one of top/bottom/left/right in order to prevent cases where the
+    // absolute-positioned element is pushed down and can affect scrolling (see #24597).
+    // `left` was chosen here, because it's the least likely to break overrides where the
+    // element might have been positioned (e.g. `mat-checkbox`).
+    left: 0;
+
+    [dir='rtl'] & {
+      left: auto;
+      right: 0;
     }
+  }
+}
+
+/// @deprecated Use `a11y-visually-hidden`.
+@mixin a11y() {
+  @include a11y-visually-hidden;
 }
 
 /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
 /// is non-empty.
-/// @param selector-context The selector under which to nest the mixin's content.
-@mixin _cdk-optionally-nest-content($selector-context) {
-    @if ($selector-context == '') {
-        @content;
-    }
-    @else {
-        #{$selector-context} {
-            @content;
-        }
+/// @param {String} selector-context The selector under which to nest the mixin's content.
+@mixin _optionally-nest-content($selector-context) {
+  @if ($selector-context == '') {
+    @content;
+  }
+  @else {
+    #{$selector-context} {
+      @content;
     }
+  }
 }
 
 /// Applies styles for users in high contrast mode. Note that this only applies
 /// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
 /// attribute, however Chrome handles high contrast differently.
 ///
-/// @param target Which kind of high contrast setting to target. Defaults to `active`, can be
-///    `white-on-black` or `black-on-white`.
-/// @param encapsulation Whether to emit styles for view encapsulation. Values are:
+/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
+///     `white-on-black` or `black-on-white`.
+/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
 ///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
 ///     * `off` - works for `None`
 ///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
-@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
-    @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
-        @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
-            'Allowed values are "active", "black-on-white", and "white-on-black"';
-    }
+@mixin high-contrast($target: active, $encapsulation: 'any') {
+  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
+    @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
+           'Allowed values are "active", "black-on-white", and "white-on-black"';
+  }
 
-    @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
-        @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
-            'Allowed values are "on", "off", and "any"';
-    }
+  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
+    @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
+           'Allowed values are "on", "off", and "any"';
+  }
 
-    // If the selector context has multiple parts, such as `.section, .region`, just doing
-    // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
-    // context. We address this by nesting the selector context under .cdk-high-contrast.
-    @at-root {
-        $selector-context: #{&};
+  // If the selector context has multiple parts, such as `.section, .region`, just doing
+  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
+  // context. We address this by nesting the selector context under .cdk-high-contrast.
+  @at-root {
+    $selector-context: #{&};
 
-        @if ($encapsulation != 'on') {
-            .cdk-high-contrast-#{$target} {
-                @include _cdk-optionally-nest-content($selector-context) {
-                    @content;
-                }
-            }
+    @if ($encapsulation != 'on') {
+      // Note that if this selector is updated, the same change has to be made inside
+      // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
+      .cdk-high-contrast-#{$target} {
+        @include _optionally-nest-content($selector-context) {
+          @content;
         }
+      }
+    }
 
-        @if ($encapsulation != 'off') {
-            .cdk-high-contrast-#{$target} :host {
-                @include _cdk-optionally-nest-content($selector-context) {
-                    @content;
-                }
-            }
+    @if ($encapsulation != 'off') {
+      .cdk-high-contrast-#{$target} :host {
+        @include _optionally-nest-content($selector-context) {
+          @content;
         }
+      }
     }
+  }
 }
 
 
@@ -869,6 +893,347 @@ $checkbox-size-border-width: 1px;
 $checkbox-size-border-radius: 4px;
 $checkbox-size-toggle-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
 $checkbox-font-default: body;
+$code-block-light-color-scheme-background: white;
+$code-block-light-color-scheme-border: #d7dee4;
+$code-block-light-color-scheme-color: #19252f;
+$code-block-light-color-scheme-actionbar-background: rgba(white, 0.5);
+$code-block-light-color-scheme-actionbar-border: null;
+$code-block-light-color-scheme-line-numbers-background: null;
+$code-block-light-color-scheme-line-numbers-border: null;
+$code-block-light-color-scheme-line-numbers-color: #8c99a5;
+$code-block-light-color-scheme-decoration-less-contrast-background: #f2f5f9;
+$code-block-light-color-scheme-decoration-less-contrast-border: #d7dee4;
+$code-block-light-color-scheme-decoration-less-contrast-actionbar-background: #f2f5f9;
+$code-block-light-color-scheme-decoration-less-contrast-actionbar-border: null;
+$code-block-light-color-scheme-hljs-addition-background: #d2f7db;
+$code-block-light-color-scheme-hljs-addition-color: #103920;
+$code-block-light-color-scheme-hljs-attr-background: null;
+$code-block-light-color-scheme-hljs-attr-color: null;
+$code-block-light-color-scheme-hljs-attribute-background: null;
+$code-block-light-color-scheme-hljs-attribute-color: null;
+$code-block-light-color-scheme-hljs-built-in-background: null;
+$code-block-light-color-scheme-hljs-built-in-color: null;
+$code-block-light-color-scheme-hljs-bullet-background: null;
+$code-block-light-color-scheme-hljs-bullet-color: null;
+$code-block-light-color-scheme-hljs-char-escape-background: null;
+$code-block-light-color-scheme-hljs-char-escape-color: null;
+$code-block-light-color-scheme-hljs-class-background: null;
+$code-block-light-color-scheme-hljs-class-color: null;
+$code-block-light-color-scheme-hljs-code-background: null;
+$code-block-light-color-scheme-hljs-code-color: null;
+$code-block-light-color-scheme-hljs-comment-background: null;
+$code-block-light-color-scheme-hljs-comment-color: #6d7a86;
+$code-block-light-color-scheme-hljs-deletion-background: #ffeaea;
+$code-block-light-color-scheme-hljs-deletion-color: #621420;
+$code-block-light-color-scheme-hljs-doctag-background: null;
+$code-block-light-color-scheme-hljs-doctag-color: null;
+$code-block-light-color-scheme-hljs-emphasis-background: null;
+$code-block-light-color-scheme-hljs-emphasis-color: null;
+$code-block-light-color-scheme-hljs-formula-background: null;
+$code-block-light-color-scheme-hljs-formula-color: null;
+$code-block-light-color-scheme-hljs-function-background: null;
+$code-block-light-color-scheme-hljs-function-color: null;
+$code-block-light-color-scheme-hljs-keyword-background: null;
+$code-block-light-color-scheme-hljs-keyword-color: null;
+$code-block-light-color-scheme-hljs-link-background: null;
+$code-block-light-color-scheme-hljs-link-color: null;
+$code-block-light-color-scheme-hljs-literal-background: null;
+$code-block-light-color-scheme-hljs-literal-color: #864775;
+$code-block-light-color-scheme-hljs-meta-background: null;
+$code-block-light-color-scheme-hljs-meta-color: #0059b8;
+$code-block-light-color-scheme-hljs-meta-keyword-background: null;
+$code-block-light-color-scheme-hljs-meta-keyword-color: null;
+$code-block-light-color-scheme-hljs-meta-string-background: null;
+$code-block-light-color-scheme-hljs-meta-string-color: #0374eb;
+$code-block-light-color-scheme-hljs-meta-prompt-background: null;
+$code-block-light-color-scheme-hljs-meta-prompt-color: null;
+$code-block-light-color-scheme-hljs-name-background: null;
+$code-block-light-color-scheme-hljs-name-color: #0059b8;
+$code-block-light-color-scheme-hljs-number-background: null;
+$code-block-light-color-scheme-hljs-number-color: #864775;
+$code-block-light-color-scheme-hljs-operator-background: null;
+$code-block-light-color-scheme-hljs-operator-color: null;
+$code-block-light-color-scheme-hljs-params-background: null;
+$code-block-light-color-scheme-hljs-params-color: null;
+$code-block-light-color-scheme-hljs-property-background: null;
+$code-block-light-color-scheme-hljs-property-color: null;
+$code-block-light-color-scheme-hljs-punctuation-background: null;
+$code-block-light-color-scheme-hljs-punctuation-color: null;
+$code-block-light-color-scheme-hljs-quote-background: null;
+$code-block-light-color-scheme-hljs-quote-color: null;
+$code-block-light-color-scheme-hljs-regexp-background: null;
+$code-block-light-color-scheme-hljs-regexp-color: #028b49;
+$code-block-light-color-scheme-hljs-section-background: null;
+$code-block-light-color-scheme-hljs-section-color: null;
+$code-block-light-color-scheme-hljs-selector-attr-background: null;
+$code-block-light-color-scheme-hljs-selector-attr-color: null;
+$code-block-light-color-scheme-hljs-selector-class-background: null;
+$code-block-light-color-scheme-hljs-selector-class-color: null;
+$code-block-light-color-scheme-hljs-selector-id-background: null;
+$code-block-light-color-scheme-hljs-selector-id-color: null;
+$code-block-light-color-scheme-hljs-selector-pseudo-background: null;
+$code-block-light-color-scheme-hljs-selector-pseudo-color: null;
+$code-block-light-color-scheme-hljs-selector-tag-background: null;
+$code-block-light-color-scheme-hljs-selector-tag-color: #0059b8;
+$code-block-light-color-scheme-hljs-string-background: null;
+$code-block-light-color-scheme-hljs-string-color: #028b49;
+$code-block-light-color-scheme-hljs-strong-background: null;
+$code-block-light-color-scheme-hljs-strong-color: null;
+$code-block-light-color-scheme-hljs-subst-background: null;
+$code-block-light-color-scheme-hljs-subst-color: null;
+$code-block-light-color-scheme-hljs-symbol-background: null;
+$code-block-light-color-scheme-hljs-symbol-color: #0059b8;
+$code-block-light-color-scheme-hljs-tag-background: null;
+$code-block-light-color-scheme-hljs-tag-color: null;
+$code-block-light-color-scheme-hljs-template-tag-background: null;
+$code-block-light-color-scheme-hljs-template-tag-color: null;
+$code-block-light-color-scheme-hljs-template-variable-background: null;
+$code-block-light-color-scheme-hljs-template-variable-color: null;
+$code-block-light-color-scheme-hljs-title-background: null;
+$code-block-light-color-scheme-hljs-title-color: #0059b8;
+$code-block-light-color-scheme-hljs-title-class-background: null;
+$code-block-light-color-scheme-hljs-title-class-color: null;
+$code-block-light-color-scheme-hljs-title-class-inherited-background: null;
+$code-block-light-color-scheme-hljs-title-class-inherited-color: null;
+$code-block-light-color-scheme-hljs-title-function-background: null;
+$code-block-light-color-scheme-hljs-title-function-color: null;
+$code-block-light-color-scheme-hljs-title-function-invoke-background: null;
+$code-block-light-color-scheme-hljs-title-function-invoke-color: null;
+$code-block-light-color-scheme-hljs-type-background: null;
+$code-block-light-color-scheme-hljs-type-color: null;
+$code-block-light-color-scheme-hljs-variable-background: null;
+$code-block-light-color-scheme-hljs-variable-color: null;
+$code-block-light-color-scheme-hljs-variable-constant-background: null;
+$code-block-light-color-scheme-hljs-variable-constant-color: null;
+$code-block-light-color-scheme-hljs-variable-language-background: null;
+$code-block-light-color-scheme-hljs-variable-language-color: null;
+$code-block-dark-color-scheme-background: #19252f;
+$code-block-dark-color-scheme-border: mix(#515e69, transparent, 50%);
+$code-block-dark-color-scheme-color: #d7dee4;
+$code-block-dark-color-scheme-actionbar-background: #19252f;
+$code-block-dark-color-scheme-actionbar-border: null;
+$code-block-dark-color-scheme-line-numbers-background: null;
+$code-block-dark-color-scheme-line-numbers-border: null;
+$code-block-dark-color-scheme-line-numbers-color: #6d7a86;
+$code-block-dark-color-scheme-decoration-less-contrast-background: #27333e;
+$code-block-dark-color-scheme-decoration-less-contrast-border: mix(#515e69, transparent, 50%);
+$code-block-dark-color-scheme-decoration-less-contrast-actionbar-background: #27333e;
+$code-block-dark-color-scheme-decoration-less-contrast-actionbar-border: null;
+$code-block-dark-color-scheme-hljs-addition-background: #103920;
+$code-block-dark-color-scheme-hljs-addition-color: #8ed5a1;
+$code-block-dark-color-scheme-hljs-attr-background: null;
+$code-block-dark-color-scheme-hljs-attr-color: null;
+$code-block-dark-color-scheme-hljs-attribute-background: null;
+$code-block-dark-color-scheme-hljs-attribute-color: null;
+$code-block-dark-color-scheme-hljs-built-in-background: null;
+$code-block-dark-color-scheme-hljs-built-in-color: null;
+$code-block-dark-color-scheme-hljs-bullet-background: null;
+$code-block-dark-color-scheme-hljs-bullet-color: null;
+$code-block-dark-color-scheme-hljs-char-escape-background: null;
+$code-block-dark-color-scheme-hljs-char-escape-color: null;
+$code-block-dark-color-scheme-hljs-class-background: null;
+$code-block-dark-color-scheme-hljs-class-color: null;
+$code-block-dark-color-scheme-hljs-code-background: null;
+$code-block-dark-color-scheme-hljs-code-color: null;
+$code-block-dark-color-scheme-hljs-comment-background: null;
+$code-block-dark-color-scheme-hljs-comment-color: #6d7a86;
+$code-block-dark-color-scheme-hljs-deletion-background: #621420;
+$code-block-dark-color-scheme-hljs-deletion-color: #fcb2b4;
+$code-block-dark-color-scheme-hljs-doctag-background: null;
+$code-block-dark-color-scheme-hljs-doctag-color: null;
+$code-block-dark-color-scheme-hljs-emphasis-background: null;
+$code-block-dark-color-scheme-hljs-emphasis-color: null;
+$code-block-dark-color-scheme-hljs-formula-background: null;
+$code-block-dark-color-scheme-hljs-formula-color: null;
+$code-block-dark-color-scheme-hljs-function-background: null;
+$code-block-dark-color-scheme-hljs-function-color: null;
+$code-block-dark-color-scheme-hljs-keyword-background: null;
+$code-block-dark-color-scheme-hljs-keyword-color: null;
+$code-block-dark-color-scheme-hljs-link-background: null;
+$code-block-dark-color-scheme-hljs-link-color: null;
+$code-block-dark-color-scheme-hljs-literal-background: null;
+$code-block-dark-color-scheme-hljs-literal-color: #c692b5;
+$code-block-dark-color-scheme-hljs-meta-background: null;
+$code-block-dark-color-scheme-hljs-meta-color: #5697ff;
+$code-block-dark-color-scheme-hljs-meta-keyword-background: null;
+$code-block-dark-color-scheme-hljs-meta-keyword-color: null;
+$code-block-dark-color-scheme-hljs-meta-string-background: null;
+$code-block-dark-color-scheme-hljs-meta-string-color: #4ba96c;
+$code-block-dark-color-scheme-hljs-meta-prompt-background: null;
+$code-block-dark-color-scheme-hljs-meta-prompt-color: null;
+$code-block-dark-color-scheme-hljs-name-background: null;
+$code-block-dark-color-scheme-hljs-name-color: #5697ff;
+$code-block-dark-color-scheme-hljs-number-background: null;
+$code-block-dark-color-scheme-hljs-number-color: #c692b5;
+$code-block-dark-color-scheme-hljs-operator-background: null;
+$code-block-dark-color-scheme-hljs-operator-color: null;
+$code-block-dark-color-scheme-hljs-params-background: null;
+$code-block-dark-color-scheme-hljs-params-color: null;
+$code-block-dark-color-scheme-hljs-property-background: null;
+$code-block-dark-color-scheme-hljs-property-color: null;
+$code-block-dark-color-scheme-hljs-punctuation-background: null;
+$code-block-dark-color-scheme-hljs-punctuation-color: null;
+$code-block-dark-color-scheme-hljs-quote-background: null;
+$code-block-dark-color-scheme-hljs-quote-color: null;
+$code-block-dark-color-scheme-hljs-regexp-background: null;
+$code-block-dark-color-scheme-hljs-regexp-color: #4ba96c;
+$code-block-dark-color-scheme-hljs-section-background: null;
+$code-block-dark-color-scheme-hljs-section-color: null;
+$code-block-dark-color-scheme-hljs-selector-attr-background: null;
+$code-block-dark-color-scheme-hljs-selector-attr-color: null;
+$code-block-dark-color-scheme-hljs-selector-class-background: null;
+$code-block-dark-color-scheme-hljs-selector-class-color: null;
+$code-block-dark-color-scheme-hljs-selector-id-background: null;
+$code-block-dark-color-scheme-hljs-selector-id-color: null;
+$code-block-dark-color-scheme-hljs-selector-pseudo-background: null;
+$code-block-dark-color-scheme-hljs-selector-pseudo-color: null;
+$code-block-dark-color-scheme-hljs-selector-tag-background: null;
+$code-block-dark-color-scheme-hljs-selector-tag-color: #5697ff;
+$code-block-dark-color-scheme-hljs-string-background: null;
+$code-block-dark-color-scheme-hljs-string-color: #4ba96c;
+$code-block-dark-color-scheme-hljs-strong-background: null;
+$code-block-dark-color-scheme-hljs-strong-color: null;
+$code-block-dark-color-scheme-hljs-subst-background: null;
+$code-block-dark-color-scheme-hljs-subst-color: null;
+$code-block-dark-color-scheme-hljs-symbol-background: null;
+$code-block-dark-color-scheme-hljs-symbol-color: #5697ff;
+$code-block-dark-color-scheme-hljs-tag-background: null;
+$code-block-dark-color-scheme-hljs-tag-color: null;
+$code-block-dark-color-scheme-hljs-template-tag-background: null;
+$code-block-dark-color-scheme-hljs-template-tag-color: null;
+$code-block-dark-color-scheme-hljs-template-variable-background: null;
+$code-block-dark-color-scheme-hljs-template-variable-color: null;
+$code-block-dark-color-scheme-hljs-title-background: null;
+$code-block-dark-color-scheme-hljs-title-color: #5697ff;
+$code-block-dark-color-scheme-hljs-title-class-background: null;
+$code-block-dark-color-scheme-hljs-title-class-color: null;
+$code-block-dark-color-scheme-hljs-title-class-inherited-background: null;
+$code-block-dark-color-scheme-hljs-title-class-inherited-color: null;
+$code-block-dark-color-scheme-hljs-title-function-background: null;
+$code-block-dark-color-scheme-hljs-title-function-color: null;
+$code-block-dark-color-scheme-hljs-title-function-invoke-background: null;
+$code-block-dark-color-scheme-hljs-title-function-invoke-color: null;
+$code-block-dark-color-scheme-hljs-type-background: null;
+$code-block-dark-color-scheme-hljs-type-color: null;
+$code-block-dark-color-scheme-hljs-variable-background: null;
+$code-block-dark-color-scheme-hljs-variable-color: null;
+$code-block-dark-color-scheme-hljs-variable-constant-background: null;
+$code-block-dark-color-scheme-hljs-variable-constant-color: null;
+$code-block-dark-color-scheme-hljs-variable-language-background: null;
+$code-block-dark-color-scheme-hljs-variable-language-color: null;
+$code-block-size-border-radius: 4px;
+$code-block-size-padding: 12px;
+$code-block-size-actionbar-border-radius: 4px;
+$code-block-size-actionbar-gap: 0;
+$code-block-size-actionbar-header-gap: 8px;
+$code-block-size-actionbar-margin-top: 6px;
+$code-block-size-actionbar-margin-right: 6px;
+$code-block-size-actionbar-padding: 8px;
+$code-block-size-line-numbers-padding: 2px 12px 0 0 ;
+$code-block-size-line-numbers-border-width: 0;
+$code-block-font-default: body-mono;
+$code-block-font-hljs-addition-font-style: null;
+$code-block-font-hljs-addition-font-weight: null;
+$code-block-font-hljs-attr-font-style: null;
+$code-block-font-hljs-attr-font-weight: null;
+$code-block-font-hljs-attribute-font-style: null;
+$code-block-font-hljs-attribute-font-weight: null;
+$code-block-font-hljs-built-in-font-style: null;
+$code-block-font-hljs-built-in-font-weight: null;
+$code-block-font-hljs-bullet-font-style: null;
+$code-block-font-hljs-bullet-font-weight: null;
+$code-block-font-hljs-char-escape-font-style: null;
+$code-block-font-hljs-char-escape-font-weight: null;
+$code-block-font-hljs-class-font-style: null;
+$code-block-font-hljs-class-font-weight: null;
+$code-block-font-hljs-code-font-style: null;
+$code-block-font-hljs-code-font-weight: null;
+$code-block-font-hljs-comment-font-style: null;
+$code-block-font-hljs-comment-font-weight: null;
+$code-block-font-hljs-deletion-font-style: null;
+$code-block-font-hljs-deletion-font-weight: null;
+$code-block-font-hljs-doctag-font-style: null;
+$code-block-font-hljs-doctag-font-weight: null;
+$code-block-font-hljs-emphasis-font-style: null;
+$code-block-font-hljs-emphasis-font-weight: null;
+$code-block-font-hljs-formula-font-style: null;
+$code-block-font-hljs-formula-font-weight: null;
+$code-block-font-hljs-function-font-style: null;
+$code-block-font-hljs-function-font-weight: null;
+$code-block-font-hljs-keyword-font-style: null;
+$code-block-font-hljs-keyword-font-weight: null;
+$code-block-font-hljs-link-font-style: null;
+$code-block-font-hljs-link-font-weight: null;
+$code-block-font-hljs-literal-font-style: null;
+$code-block-font-hljs-literal-font-weight: null;
+$code-block-font-hljs-meta-font-style: null;
+$code-block-font-hljs-meta-font-weight: null;
+$code-block-font-hljs-meta-keyword-font-style: null;
+$code-block-font-hljs-meta-keyword-font-weight: null;
+$code-block-font-hljs-meta-string-font-style: null;
+$code-block-font-hljs-meta-string-font-weight: null;
+$code-block-font-hljs-meta-prompt-font-style: null;
+$code-block-font-hljs-meta-prompt-font-weight: null;
+$code-block-font-hljs-name-font-style: null;
+$code-block-font-hljs-name-font-weight: null;
+$code-block-font-hljs-number-font-style: null;
+$code-block-font-hljs-number-font-weight: null;
+$code-block-font-hljs-operator-font-style: null;
+$code-block-font-hljs-operator-font-weight: null;
+$code-block-font-hljs-params-font-style: null;
+$code-block-font-hljs-params-font-weight: null;
+$code-block-font-hljs-property-font-style: null;
+$code-block-font-hljs-property-font-weight: null;
+$code-block-font-hljs-punctuation-font-style: null;
+$code-block-font-hljs-punctuation-font-weight: null;
+$code-block-font-hljs-quote-font-style: null;
+$code-block-font-hljs-quote-font-weight: null;
+$code-block-font-hljs-regexp-font-style: null;
+$code-block-font-hljs-regexp-font-weight: null;
+$code-block-font-hljs-section-font-style: null;
+$code-block-font-hljs-section-font-weight: null;
+$code-block-font-hljs-selector-attr-font-style: null;
+$code-block-font-hljs-selector-attr-font-weight: null;
+$code-block-font-hljs-selector-class-font-style: null;
+$code-block-font-hljs-selector-class-font-weight: null;
+$code-block-font-hljs-selector-id-font-style: null;
+$code-block-font-hljs-selector-id-font-weight: null;
+$code-block-font-hljs-selector-pseudo-font-style: null;
+$code-block-font-hljs-selector-pseudo-font-weight: null;
+$code-block-font-hljs-selector-tag-font-style: null;
+$code-block-font-hljs-selector-tag-font-weight: null;
+$code-block-font-hljs-string-font-style: null;
+$code-block-font-hljs-string-font-weight: null;
+$code-block-font-hljs-strong-font-style: null;
+$code-block-font-hljs-strong-font-weight: null;
+$code-block-font-hljs-subst-font-style: null;
+$code-block-font-hljs-subst-font-weight: null;
+$code-block-font-hljs-symbol-font-style: null;
+$code-block-font-hljs-symbol-font-weight: null;
+$code-block-font-hljs-tag-font-style: null;
+$code-block-font-hljs-tag-font-weight: null;
+$code-block-font-hljs-template-tag-font-style: null;
+$code-block-font-hljs-template-tag-font-weight: null;
+$code-block-font-hljs-template-variable-font-style: null;
+$code-block-font-hljs-template-variable-font-weight: null;
+$code-block-font-hljs-title-font-style: null;
+$code-block-font-hljs-title-font-weight: null;
+$code-block-font-hljs-title-class-font-style: normal;
+$code-block-font-hljs-title-class-font-weight: 500;
+$code-block-font-hljs-title-class-inherited-font-style: null;
+$code-block-font-hljs-title-class-inherited-font-weight: null;
+$code-block-font-hljs-title-function-font-style: null;
+$code-block-font-hljs-title-function-font-weight: null;
+$code-block-font-hljs-title-function-invoke-font-style: null;
+$code-block-font-hljs-title-function-invoke-font-weight: null;
+$code-block-font-hljs-type-font-style: null;
+$code-block-font-hljs-type-font-weight: null;
+$code-block-font-hljs-variable-font-style: null;
+$code-block-font-hljs-variable-font-weight: null;
+$code-block-font-hljs-variable-constant-font-style: null;
+$code-block-font-hljs-variable-constant-font-weight: null;
+$code-block-font-hljs-variable-language-font-style: null;
+$code-block-font-hljs-variable-language-font-weight: null;
 $datepicker-toggle-size-width: 30px;
 $datepicker-toggle-size-height: 30px;
 $datepicker-body-light-color-scheme-states-today-color: #0374eb;
@@ -3061,7 +3426,7 @@ $md-typography: (
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mc-core() {
-    @include cdk-a11y();
+    @include a11y-visually-hidden();
     @include overlay();
 }
 
@@ -3286,6 +3651,124 @@ $md-typography: (
         )
     );
 
+    $code-block: (
+        main-background: $code-block-light-color-scheme-background,
+        border: $code-block-light-color-scheme-border,
+        main-background-less-contrast: $code-block-light-color-scheme-decoration-less-contrast-background,
+        line-numbers-color: $code-block-light-color-scheme-line-numbers-color,
+        main-code-color: $code-block-light-color-scheme-color,
+
+        actionbar: (
+            bg: $code-block-light-color-scheme-actionbar-background,
+            bg-less-contrast: $code-block-light-color-scheme-decoration-less-contrast-actionbar-background,
+        ),
+
+        hljs: (
+            addition-background: $code-block-light-color-scheme-hljs-addition-background,
+            addition-color: $code-block-light-color-scheme-hljs-addition-color,
+            attr-background: $code-block-light-color-scheme-hljs-attr-background,
+            attr-color: $code-block-light-color-scheme-hljs-attr-color,
+            attribute-background: $code-block-light-color-scheme-hljs-attribute-background,
+            attribute-color: $code-block-light-color-scheme-hljs-attribute-color,
+            built-in-background: $code-block-light-color-scheme-hljs-built-in-background,
+            built-in-color: $code-block-light-color-scheme-hljs-built-in-color,
+            bullet-background: $code-block-light-color-scheme-hljs-bullet-background,
+            bullet-color: $code-block-light-color-scheme-hljs-bullet-color,
+            char-escape-background: $code-block-light-color-scheme-hljs-char-escape-background,
+            char-escape-color: $code-block-light-color-scheme-hljs-char-escape-color,
+            class-background: $code-block-light-color-scheme-hljs-class-background,
+            class-color: $code-block-light-color-scheme-hljs-class-color,
+            code-background: $code-block-light-color-scheme-hljs-code-background,
+            code-color: $code-block-light-color-scheme-hljs-code-color,
+            comment-background: $code-block-light-color-scheme-hljs-comment-background,
+            comment-color: $code-block-light-color-scheme-hljs-comment-color,
+            deletion-background: $code-block-light-color-scheme-hljs-deletion-background,
+            deletion-color: $code-block-light-color-scheme-hljs-deletion-color,
+            doctag-background: $code-block-light-color-scheme-hljs-doctag-background,
+            doctag-color: $code-block-light-color-scheme-hljs-doctag-color,
+            emphasis-background: $code-block-light-color-scheme-hljs-emphasis-background,
+            emphasis-color: $code-block-light-color-scheme-hljs-emphasis-color,
+            formula-background: $code-block-light-color-scheme-hljs-formula-background,
+            formula-color: $code-block-light-color-scheme-hljs-formula-color,
+            function-background: $code-block-light-color-scheme-hljs-function-background,
+            function-color: $code-block-light-color-scheme-hljs-function-color,
+            keyword-background: $code-block-light-color-scheme-hljs-keyword-background,
+            keyword-color: $code-block-light-color-scheme-hljs-keyword-color,
+            link-background: $code-block-light-color-scheme-hljs-link-background,
+            link-color: $code-block-light-color-scheme-hljs-link-color,
+            literal-background: $code-block-light-color-scheme-hljs-literal-background,
+            literal-color: $code-block-light-color-scheme-hljs-literal-color,
+            meta-background: $code-block-light-color-scheme-hljs-meta-background,
+            meta-color: $code-block-light-color-scheme-hljs-meta-color,
+            meta-keyword-background: $code-block-light-color-scheme-hljs-meta-keyword-background,
+            meta-keyword-color: $code-block-light-color-scheme-hljs-meta-keyword-color,
+            meta-string-background: $code-block-light-color-scheme-hljs-meta-string-background,
+            meta-string-color: $code-block-light-color-scheme-hljs-meta-string-color,
+            meta-prompt-background: $code-block-light-color-scheme-hljs-meta-prompt-background,
+            meta-prompt-color: $code-block-light-color-scheme-hljs-meta-prompt-color,
+            name-background: $code-block-light-color-scheme-hljs-name-background,
+            name-color: $code-block-light-color-scheme-hljs-name-color,
+            number-background: $code-block-light-color-scheme-hljs-number-background,
+            number-color: $code-block-light-color-scheme-hljs-number-color,
+            operator-background: $code-block-light-color-scheme-hljs-operator-background,
+            operator-color: $code-block-light-color-scheme-hljs-operator-color,
+            params-background: $code-block-light-color-scheme-hljs-params-background,
+            params-color: $code-block-light-color-scheme-hljs-params-color,
+            property-background: $code-block-light-color-scheme-hljs-property-background,
+            property-color: $code-block-light-color-scheme-hljs-property-color,
+            punctuation-background: $code-block-light-color-scheme-hljs-punctuation-background,
+            punctuation-color: $code-block-light-color-scheme-hljs-punctuation-color,
+            quote-background: $code-block-light-color-scheme-hljs-quote-background,
+            quote-color: $code-block-light-color-scheme-hljs-quote-color,
+            regexp-background: $code-block-light-color-scheme-hljs-regexp-background,
+            regexp-color: $code-block-light-color-scheme-hljs-regexp-color,
+            section-background: $code-block-light-color-scheme-hljs-section-background,
+            section-color: $code-block-light-color-scheme-hljs-section-color,
+            selector-attr-background: $code-block-light-color-scheme-hljs-selector-attr-background,
+            selector-attr-color: $code-block-light-color-scheme-hljs-selector-attr-color,
+            selector-class-background: $code-block-light-color-scheme-hljs-selector-class-background,
+            selector-class-color: $code-block-light-color-scheme-hljs-selector-class-color,
+            selector-id-background: $code-block-light-color-scheme-hljs-selector-id-background,
+            selector-id-color: $code-block-light-color-scheme-hljs-selector-id-color,
+            selector-pseudo-background: $code-block-light-color-scheme-hljs-selector-pseudo-background,
+            selector-pseudo-color: $code-block-light-color-scheme-hljs-selector-pseudo-color,
+            selector-tag-background: $code-block-light-color-scheme-hljs-selector-tag-background,
+            selector-tag-color: $code-block-light-color-scheme-hljs-selector-tag-color,
+            string-background: $code-block-light-color-scheme-hljs-string-background,
+            string-color: $code-block-light-color-scheme-hljs-string-color,
+            strong-background: $code-block-light-color-scheme-hljs-strong-background,
+            strong-color: $code-block-light-color-scheme-hljs-strong-color,
+            subst-background: $code-block-light-color-scheme-hljs-subst-background,
+            subst-color: $code-block-light-color-scheme-hljs-subst-color,
+            symbol-background: $code-block-light-color-scheme-hljs-symbol-background,
+            symbol-color: $code-block-light-color-scheme-hljs-symbol-color,
+            tag-background: $code-block-light-color-scheme-hljs-tag-background,
+            tag-color: $code-block-light-color-scheme-hljs-tag-color,
+            template-tag-background: $code-block-light-color-scheme-hljs-template-tag-background,
+            template-tag-color: $code-block-light-color-scheme-hljs-template-tag-color,
+            template-variable-background: $code-block-light-color-scheme-hljs-template-variable-background,
+            template-variable-color: $code-block-light-color-scheme-hljs-template-variable-color,
+            title-background: $code-block-light-color-scheme-hljs-title-background,
+            title-color: $code-block-light-color-scheme-hljs-title-color,
+            title-class-background: $code-block-light-color-scheme-hljs-title-class-background,
+            title-class-color: $code-block-light-color-scheme-hljs-title-class-color,
+            title-class-inherited-background: $code-block-light-color-scheme-hljs-title-class-inherited-background,
+            title-class-inherited-color: $code-block-light-color-scheme-hljs-title-class-inherited-color,
+            title-function-background: $code-block-light-color-scheme-hljs-title-function-background,
+            title-function-color: $code-block-light-color-scheme-hljs-title-function-color,
+            title-function-invoke-background: $code-block-light-color-scheme-hljs-title-function-invoke-background,
+            title-function-invoke-color: $code-block-light-color-scheme-hljs-title-function-invoke-color,
+            type-background: $code-block-light-color-scheme-hljs-type-background,
+            type-color: $code-block-light-color-scheme-hljs-type-color,
+            variable-background: $code-block-light-color-scheme-hljs-variable-background,
+            variable-color: $code-block-light-color-scheme-hljs-variable-color,
+            variable-constant-background: $code-block-light-color-scheme-hljs-variable-constant-background,
+            variable-constant-color: $code-block-light-color-scheme-hljs-variable-constant-color,
+            variable-language-background: $code-block-light-color-scheme-hljs-variable-language-background,
+            variable-language-color: $code-block-light-color-scheme-hljs-variable-language-color
+        )
+    );
+
     $datepicker: (
         state-today-color: $datepicker-body-light-color-scheme-states-today-color,
         state-selected-color: $datepicker-body-light-color-scheme-states-selected-color,
@@ -3640,6 +4123,7 @@ $md-typography: (
         button: $button,
         card: $card,
         checkbox: $checkbox,
+        code-block: $code-block,
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
@@ -3880,6 +4364,124 @@ $md-typography: (
         )
     );
 
+    $code-block: (
+        main-background: $code-block-dark-color-scheme-background,
+        border: $code-block-dark-color-scheme-border,
+        main-background-less-contrast: $code-block-dark-color-scheme-decoration-less-contrast-background,
+        line-numbers-color: $code-block-dark-color-scheme-line-numbers-color,
+        main-code-color: $code-block-dark-color-scheme-color,
+
+        actionbar: (
+            bg: $code-block-dark-color-scheme-actionbar-background,
+            bg-less-contrast: $code-block-dark-color-scheme-decoration-less-contrast-actionbar-background,
+        ),
+
+        hljs: (
+            addition-background: $code-block-dark-color-scheme-hljs-addition-background,
+            addition-color: $code-block-dark-color-scheme-hljs-addition-color,
+            attr-background: $code-block-dark-color-scheme-hljs-attr-background,
+            attr-color: $code-block-dark-color-scheme-hljs-attr-color,
+            attribute-background: $code-block-dark-color-scheme-hljs-attribute-background,
+            attribute-color: $code-block-dark-color-scheme-hljs-attribute-color,
+            built-in-background: $code-block-dark-color-scheme-hljs-built-in-background,
+            built-in-color: $code-block-dark-color-scheme-hljs-built-in-color,
+            bullet-background: $code-block-dark-color-scheme-hljs-bullet-background,
+            bullet-color: $code-block-dark-color-scheme-hljs-bullet-color,
+            char-escape-background: $code-block-dark-color-scheme-hljs-char-escape-background,
+            char-escape-color: $code-block-dark-color-scheme-hljs-char-escape-color,
+            class-background: $code-block-dark-color-scheme-hljs-class-background,
+            class-color: $code-block-dark-color-scheme-hljs-class-color,
+            code-background: $code-block-dark-color-scheme-hljs-code-background,
+            code-color: $code-block-dark-color-scheme-hljs-code-color,
+            comment-background: $code-block-dark-color-scheme-hljs-comment-background,
+            comment-color: $code-block-dark-color-scheme-hljs-comment-color,
+            deletion-background: $code-block-dark-color-scheme-hljs-deletion-background,
+            deletion-color: $code-block-dark-color-scheme-hljs-deletion-color,
+            doctag-background: $code-block-dark-color-scheme-hljs-doctag-background,
+            doctag-color: $code-block-dark-color-scheme-hljs-doctag-color,
+            emphasis-background: $code-block-dark-color-scheme-hljs-emphasis-background,
+            emphasis-color: $code-block-dark-color-scheme-hljs-emphasis-color,
+            formula-background: $code-block-dark-color-scheme-hljs-formula-background,
+            formula-color: $code-block-dark-color-scheme-hljs-formula-color,
+            function-background: $code-block-dark-color-scheme-hljs-function-background,
+            function-color: $code-block-dark-color-scheme-hljs-function-color,
+            keyword-background: $code-block-dark-color-scheme-hljs-keyword-background,
+            keyword-color: $code-block-dark-color-scheme-hljs-keyword-color,
+            link-background: $code-block-dark-color-scheme-hljs-link-background,
+            link-color: $code-block-dark-color-scheme-hljs-link-color,
+            literal-background: $code-block-dark-color-scheme-hljs-literal-background,
+            literal-color: $code-block-dark-color-scheme-hljs-literal-color,
+            meta-background: $code-block-dark-color-scheme-hljs-meta-background,
+            meta-color: $code-block-dark-color-scheme-hljs-meta-color,
+            meta-keyword-background: $code-block-dark-color-scheme-hljs-meta-keyword-background,
+            meta-keyword-color: $code-block-dark-color-scheme-hljs-meta-keyword-color,
+            meta-string-background: $code-block-dark-color-scheme-hljs-meta-string-background,
+            meta-string-color: $code-block-dark-color-scheme-hljs-meta-string-color,
+            meta-prompt-background: $code-block-dark-color-scheme-hljs-meta-prompt-background,
+            meta-prompt-color: $code-block-dark-color-scheme-hljs-meta-prompt-color,
+            name-background: $code-block-dark-color-scheme-hljs-name-background,
+            name-color: $code-block-dark-color-scheme-hljs-name-color,
+            number-background: $code-block-dark-color-scheme-hljs-number-background,
+            number-color: $code-block-dark-color-scheme-hljs-number-color,
+            operator-background: $code-block-dark-color-scheme-hljs-operator-background,
+            operator-color: $code-block-dark-color-scheme-hljs-operator-color,
+            params-background: $code-block-dark-color-scheme-hljs-params-background,
+            params-color: $code-block-dark-color-scheme-hljs-params-color,
+            property-background: $code-block-dark-color-scheme-hljs-property-background,
+            property-color: $code-block-dark-color-scheme-hljs-property-color,
+            punctuation-background: $code-block-dark-color-scheme-hljs-punctuation-background,
+            punctuation-color: $code-block-dark-color-scheme-hljs-punctuation-color,
+            quote-background: $code-block-dark-color-scheme-hljs-quote-background,
+            quote-color: $code-block-dark-color-scheme-hljs-quote-color,
+            regexp-background: $code-block-dark-color-scheme-hljs-regexp-background,
+            regexp-color: $code-block-dark-color-scheme-hljs-regexp-color,
+            section-background: $code-block-dark-color-scheme-hljs-section-background,
+            section-color: $code-block-dark-color-scheme-hljs-section-color,
+            selector-attr-background: $code-block-dark-color-scheme-hljs-selector-attr-background,
+            selector-attr-color: $code-block-dark-color-scheme-hljs-selector-attr-color,
+            selector-class-background: $code-block-dark-color-scheme-hljs-selector-class-background,
+            selector-class-color: $code-block-dark-color-scheme-hljs-selector-class-color,
+            selector-id-background: $code-block-dark-color-scheme-hljs-selector-id-background,
+            selector-id-color: $code-block-dark-color-scheme-hljs-selector-id-color,
+            selector-pseudo-background: $code-block-dark-color-scheme-hljs-selector-pseudo-background,
+            selector-pseudo-color: $code-block-dark-color-scheme-hljs-selector-pseudo-color,
+            selector-tag-background: $code-block-dark-color-scheme-hljs-selector-tag-background,
+            selector-tag-color: $code-block-dark-color-scheme-hljs-selector-tag-color,
+            string-background: $code-block-dark-color-scheme-hljs-string-background,
+            string-color: $code-block-dark-color-scheme-hljs-string-color,
+            strong-background: $code-block-dark-color-scheme-hljs-strong-background,
+            strong-color: $code-block-dark-color-scheme-hljs-strong-color,
+            subst-background: $code-block-dark-color-scheme-hljs-subst-background,
+            subst-color: $code-block-dark-color-scheme-hljs-subst-color,
+            symbol-background: $code-block-dark-color-scheme-hljs-symbol-background,
+            symbol-color: $code-block-dark-color-scheme-hljs-symbol-color,
+            tag-background: $code-block-dark-color-scheme-hljs-tag-background,
+            tag-color: $code-block-dark-color-scheme-hljs-tag-color,
+            template-tag-background: $code-block-dark-color-scheme-hljs-template-tag-background,
+            template-tag-color: $code-block-dark-color-scheme-hljs-template-tag-color,
+            template-variable-background: $code-block-dark-color-scheme-hljs-template-variable-background,
+            template-variable-color: $code-block-dark-color-scheme-hljs-template-variable-color,
+            title-background: $code-block-dark-color-scheme-hljs-title-background,
+            title-color: $code-block-dark-color-scheme-hljs-title-color,
+            title-class-background: $code-block-dark-color-scheme-hljs-title-class-background,
+            title-class-color: $code-block-dark-color-scheme-hljs-title-class-color,
+            title-class-inherited-background: $code-block-dark-color-scheme-hljs-title-class-inherited-background,
+            title-class-inherited-color: $code-block-dark-color-scheme-hljs-title-class-inherited-color,
+            title-function-background: $code-block-dark-color-scheme-hljs-title-function-background,
+            title-function-color: $code-block-dark-color-scheme-hljs-title-function-color,
+            title-function-invoke-background: $code-block-dark-color-scheme-hljs-title-function-invoke-background,
+            title-function-invoke-color: $code-block-dark-color-scheme-hljs-title-function-invoke-color,
+            type-background: $code-block-dark-color-scheme-hljs-type-background,
+            type-color: $code-block-dark-color-scheme-hljs-type-color,
+            variable-background: $code-block-dark-color-scheme-hljs-variable-background,
+            variable-color: $code-block-dark-color-scheme-hljs-variable-color,
+            variable-constant-background: $code-block-dark-color-scheme-hljs-variable-constant-background,
+            variable-constant-color: $code-block-dark-color-scheme-hljs-variable-constant-color,
+            variable-language-background: $code-block-dark-color-scheme-hljs-variable-language-background,
+            variable-language-color: $code-block-dark-color-scheme-hljs-variable-language-color
+        )
+    );
+
     $datepicker: (
         state-selected-today-color: $datepicker-body-dark-color-scheme-states-today-color,
         state-selected-color: $datepicker-body-dark-color-scheme-states-selected-color,
@@ -4234,6 +4836,7 @@ $md-typography: (
         button: $button,
         card: $card,
         checkbox: $checkbox,
+        code-block: $code-block,
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
@@ -4262,148 +4865,871 @@ $md-typography: (
     );
 }
 
+@function mc-components-theme($tokens, $scheme) {
+    $alert: (
+        error: (
+            background: map-get($tokens, 'alert-#{$scheme}-error-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-error-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-error-icon')
+        ),
+        warning: (
+            background: map-get($tokens, 'alert-#{$scheme}-warning-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-warning-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-warning-icon')
+        ),
+        success: (
+            background: map-get($tokens, 'alert-#{$scheme}-success-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-success-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-success-icon')
+        ),
+        info: (
+            background: map-get($tokens, 'alert-#{$scheme}-info-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-info-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-info-icon')
+        ),
+        default: (
+            background: map-get($tokens, 'alert-#{$scheme}-default-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-default-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-default-icon')
+        ),
+    );
 
+    $popup: (
+        shadow: map-get($tokens, 'popup-#{$scheme}-shadow'),
+        border: map-get($tokens, 'popup-#{$scheme}-border'),
 
-// Mixin that renders all of the core styles that depend on the theme.
-@mixin mc-core-theme($theme) {
-    .mc-app-background {
-        $background: map-get($theme, background);
-        $foreground: map-get($theme, foreground);
+        background: map-get($tokens, 'popup-#{$scheme}-background'),
+        footer-background: map-get($tokens, 'popup-#{$scheme}-footer-background')
+    );
 
-        background-color: mc-color($background, background);
-        color: mc-color($foreground, text);
-    }
+    $badge: (
+        primary_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
+        ),
+        second_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-second-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-second-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-second-border')
+        ),
+        light_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
+        ),
+        info_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
+        ),
+        success_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
+        ),
+        warning_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
+        ),
+        error_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
+        ),
+        transparent_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
+        ),
+        primary_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
+        ),
+        info_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
+        ),
+        success_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
+        ),
+        warning_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
+        ),
+        error_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')
+        ),
+    );
 
-    .mc-theme-loaded-marker {
-        display: none;
-    }
+    $button: (
+        state-active_shadow: map-get($tokens, 'button-#{$scheme}-active-shadow'),
 
-    .mc-primary {
-        color: mc-color(map-get($theme, primary));
-    }
+        primary: (
+            color: map-get($tokens, 'button-#{$scheme}-primary-color'),
+            border: map-get($tokens, 'button-#{$scheme}-primary-border'),
+            background: map-get($tokens, 'button-#{$scheme}-primary-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-primary-icon'),
 
-    .mc-error {
-        color: mc-color(map-get($theme, error));
-    }
+            active_border: map-get($tokens, 'button-#{$scheme}-primary-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-primary-states-active-background')
+        ),
 
-    .mc-warning {
-        color: mc-color(map-get($theme, warning));
-    }
+        primary_transparent: (
+            color: map-get($tokens, 'button-#{$scheme}-primary-transparent-color'),
+            icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-icon'),
 
-    .mc-success {
-        color: mc-color(map-get($theme, success));
-    }
+            hover_color: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-hover-color'),
+            hover_icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-hover-icon'),
 
-    .mc-info {
-        color: mc-color(map-get($theme, info));
-    }
-}
+            active_color: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-active-color'),
+            active_icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-active-icon')
+        ),
 
-@function mc-contrast($palette, $hue) {
-    @return map-get(map-get($palette, contrast), $hue);
-}
+        second: (
+            color: map-get($tokens, 'button-#{$scheme}-second-color'),
+            border: map-get($tokens, 'button-#{$scheme}-second-border'),
+            background: map-get($tokens, 'button-#{$scheme}-second-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-second-icon'),
 
-@function mc-palette($base-palette, $default) {
-    $result: map_merge($base-palette, (default: $default));
+            active_border: map-get($tokens, 'button-#{$scheme}-second-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-second-states-active-background')
+        ),
 
-    // For each hue in the palette, add a "-contrast" color to the map.
-    @each $hue, $color in $base-palette {
-        $result: map_merge($result, ('#{$hue}-contrast': mc-contrast($base-palette, $hue)));
-    }
+        error: (
+            color: map-get($tokens, 'button-#{$scheme}-error-color'),
+            border: map-get($tokens, 'button-#{$scheme}-error-border'),
+            background: map-get($tokens, 'button-#{$scheme}-error-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-error-icon'),
 
-    @return $result;
-}
+            active_border: map-get($tokens, 'button-#{$scheme}-error-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-error-states-active-background')
+        )
+    );
 
-@function mc-color($palette, $hue: default, $opacity: null) {
-    // If hueKey is a number between zero and one, then it actually contains an
-    // opacity value, so recall this function with the default hue and that given opacity.
-    @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
-        @return mc-color($palette, default, $hue);
-    }
+    $card: (
+        error: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-error-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-error-shadow')
+        ),
+        warning: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-warning-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-warning-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-warning-shadow')
+        ),
+        success: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-success-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-success-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-success-shadow')
+        ),
+        info: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-info-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-info-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-info-shadow')
+        )
+    );
 
-    $color: map-get($palette, $hue);
-    $opacity: if($opacity == null, opacity($color), $opacity);
+    $checkbox: (
+        default: (
+            border: map-get($tokens, 'checkbox-#{$scheme}-default-border'),
+            color: map-get($tokens, 'checkbox-#{$scheme}-default-color'),
+            background: map-get($tokens, 'checkbox-#{$scheme}-default-background'),
 
-    @return rgba($color, $opacity);
-}
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-focused-border'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-default-states-focused-shadow')
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-background'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-shadow'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-outline')
+            )
+        ),
+        error: (
+            border: map-get($tokens, 'checkbox-#{$scheme}-error-border'),
+            color: map-get($tokens, 'checkbox-#{$scheme}-error-color'),
+            background: map-get($tokens, 'checkbox-#{$scheme}-error-background'),
 
-$light-primary: mc-palette($light-color-scheme-primary-palette, $light-color-scheme-primary-default);
-$light-second: mc-palette($light-color-scheme-second-palette, $light-color-scheme-second-default);
-$light-error: mc-palette($light-color-scheme-error-palette, $light-color-scheme-error-default);
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-background'),
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-border'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-shadow'),
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-background'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-shadow'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-outline')
+            )
+        )
+    );
 
-$light-info: mc-palette($light-color-scheme-info-palette, $light-color-scheme-info-default);
-$light-success: mc-palette($light-color-scheme-success-palette, $light-color-scheme-success-default);
-$light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-scheme-warning-default);
+    $code-block: (
+        main-background: map-get($tokens, 'code-block-#{$scheme}-background'),
+        actionbar-background: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
+        border: map-get($tokens, 'code-block-#{$scheme}-border'),
+        main-background-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-background'),
+        line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-line-numbers-color'),
+        main-code-color: map-get($tokens, 'code-block-#{$scheme}-color'),
+
+        actionbar: (
+            bg: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
+            bg-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-actionbar-background'),
+        ),
 
-@function mc-light-theme(
-    $primary: $light-primary,
-    $second: $light-second,
-    $error: $light-error,
-    $info: $light-info,
-    $success: $light-success,
-    $warning: $light-warning
-) {
-    $states: (
-        focused-color: $light-color-scheme-states-focused-color,
-        selected-color: $light-color-scheme-states-selected-color,
-        pressed-shadow: $light-color-scheme-states-pressed-shadow,
-        disabled-opacity: $light-color-scheme-states-disabled-opacity
+        hljs: (
+            addition-background: map-get($tokens, 'code-block-#{$scheme}-hljs-addition-background'),
+            addition-color: map-get($tokens, 'code-block-#{$scheme}-hljs-addition-color'),
+            attr-background: map-get($tokens, 'code-block-#{$scheme}-hljs-attr-background'),
+            attr-color: map-get($tokens, 'code-block-#{$scheme}-hljs-attr-color'),
+            attribute-background: map-get($tokens, 'code-block-#{$scheme}-hljs-attribute-background'),
+            attribute-color: map-get($tokens, 'code-block-#{$scheme}-hljs-attribute-color'),
+            built-in-background: map-get($tokens, 'code-block-#{$scheme}-hljs-built-in-background'),
+            built-in-color: map-get($tokens, 'code-block-#{$scheme}-hljs-built-in-color'),
+            bullet-background: map-get($tokens, 'code-block-#{$scheme}-hljs-bullet-background'),
+            bullet-color: map-get($tokens, 'code-block-#{$scheme}-hljs-bullet-color'),
+            char-escape-background: map-get($tokens, 'code-block-#{$scheme}-hljs-char-escape-background'),
+            char-escape-color: map-get($tokens, 'code-block-#{$scheme}-hljs-char-escape-color'),
+            class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-class-background'),
+            class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-class-color'),
+            code-background: map-get($tokens, 'code-block-#{$scheme}-hljs-code-background'),
+            code-color: map-get($tokens, 'code-block-#{$scheme}-hljs-code-color'),
+            comment-background: map-get($tokens, 'code-block-#{$scheme}-hljs-comment-background'),
+            comment-color: map-get($tokens, 'code-block-#{$scheme}-hljs-comment-color'),
+            deletion-background: map-get($tokens, 'code-block-#{$scheme}-hljs-deletion-background'),
+            deletion-color: map-get($tokens, 'code-block-#{$scheme}-hljs-deletion-color'),
+            doctag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-doctag-background'),
+            doctag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-doctag-color'),
+            emphasis-background: map-get($tokens, 'code-block-#{$scheme}-hljs-emphasis-background'),
+            emphasis-color: map-get($tokens, 'code-block-#{$scheme}-hljs-emphasis-color'),
+            formula-background: map-get($tokens, 'code-block-#{$scheme}-hljs-formula-background'),
+            formula-color: map-get($tokens, 'code-block-#{$scheme}-hljs-formula-color'),
+            function-background: map-get($tokens, 'code-block-#{$scheme}-hljs-function-background'),
+            function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-function-color'),
+            keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-background'),
+            keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-color'),
+            link-background: map-get($tokens, 'code-block-#{$scheme}-hljs-link-background'),
+            link-color: map-get($tokens, 'code-block-#{$scheme}-hljs-link-color'),
+            literal-background: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-background'),
+            literal-color: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-color'),
+            meta-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-background'),
+            meta-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-color'),
+            meta-keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-keyword-background'),
+            meta-keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-keyword-color'),
+            meta-string-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-string-background'),
+            meta-string-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-string-color'),
+            meta-prompt-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-prompt-background'),
+            meta-prompt-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-prompt-color'),
+            name-background: map-get($tokens, 'code-block-#{$scheme}-hljs-name-background'),
+            name-color: map-get($tokens, 'code-block-#{$scheme}-hljs-name-color'),
+            number-background: map-get($tokens, 'code-block-#{$scheme}-hljs-number-background'),
+            number-color: map-get($tokens, 'code-block-#{$scheme}-hljs-number-color'),
+            operator-background: map-get($tokens, 'code-block-#{$scheme}-hljs-operator-background'),
+            operator-color: map-get($tokens, 'code-block-#{$scheme}-hljs-operator-color'),
+            params-background: map-get($tokens, 'code-block-#{$scheme}-hljs-params-background'),
+            params-color: map-get($tokens, 'code-block-#{$scheme}-hljs-params-color'),
+            property-background: map-get($tokens, 'code-block-#{$scheme}-hljs-property-background'),
+            property-color: map-get($tokens, 'code-block-#{$scheme}-hljs-property-color'),
+            punctuation-background: map-get($tokens, 'code-block-#{$scheme}-hljs-punctuation-background'),
+            punctuation-color: map-get($tokens, 'code-block-#{$scheme}-hljs-punctuation-color'),
+            quote-background: map-get($tokens, 'code-block-#{$scheme}-hljs-quote-background'),
+            quote-color: map-get($tokens, 'code-block-#{$scheme}-hljs-quote-color'),
+            regexp-background: map-get($tokens, 'code-block-#{$scheme}-hljs-regexp-background'),
+            regexp-color: map-get($tokens, 'code-block-#{$scheme}-hljs-regexp-color'),
+            section-background: map-get($tokens, 'code-block-#{$scheme}-hljs-section-background'),
+            section-color: map-get($tokens, 'code-block-#{$scheme}-hljs-section-color'),
+            selector-attr-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-attr-background'),
+            selector-attr-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-attr-color'),
+            selector-class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-class-background'),
+            selector-class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-class-color'),
+            selector-id-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-id-background'),
+            selector-id-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-id-color'),
+            selector-pseudo-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-pseudo-background'),
+            selector-pseudo-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-pseudo-color'),
+            selector-tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-tag-background'),
+            selector-tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-tag-color'),
+            string-background: map-get($tokens, 'code-block-#{$scheme}-hljs-string-background'),
+            string-color: map-get($tokens, 'code-block-#{$scheme}-hljs-string-color'),
+            strong-background: map-get($tokens, 'code-block-#{$scheme}-hljs-strong-background'),
+            strong-color: map-get($tokens, 'code-block-#{$scheme}-hljs-strong-color'),
+            subst-background: map-get($tokens, 'code-block-#{$scheme}-hljs-subst-background'),
+            subst-color: map-get($tokens, 'code-block-#{$scheme}-hljs-subst-color'),
+            symbol-background: map-get($tokens, 'code-block-#{$scheme}-hljs-symbol-background'),
+            symbol-color: map-get($tokens, 'code-block-#{$scheme}-hljs-symbol-color'),
+            tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-tag-background'),
+            tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-tag-color'),
+            template-tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-template-tag-background'),
+            template-tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-template-tag-color'),
+            template-variable-background: map-get($tokens, 'code-block-#{$scheme}-hljs-template-variable-background'),
+            template-variable-color: map-get($tokens, 'code-block-#{$scheme}-hljs-template-variable-color'),
+            title-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-background'),
+            title-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-color'),
+            title-class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-background'),
+            title-class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-color'),
+            title-class-inherited-background: map-get(
+                $tokens, 'code-block-#{$scheme}-hljs-title-class-inherited-background'
+            ),
+            title-class-inherited-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-inherited-color'),
+            title-function-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-background'),
+            title-function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-color'),
+            title-function-invoke-background: map-get(
+                $tokens, 'code-block-#{$scheme}-hljs-title-function-invoke-background'
+            ),
+            title-function-invoke-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-invoke-color'),
+            type-background: map-get($tokens, 'code-block-#{$scheme}-hljs-type-background'),
+            type-color: map-get($tokens, 'code-block-#{$scheme}-hljs-type-color'),
+            variable-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-background'),
+            variable-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-color'),
+            variable-constant-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-background'),
+            variable-constant-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-color'),
+            variable-language-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-language-background'),
+            variable-language-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color')r
+        )
     );
 
-    $foreground: (
-        text: $light-color-scheme-foreground-text,
-        text-less-contrast: $light-color-scheme-foreground-text-less-contrast,
-        text-disabled: $light-color-scheme-foreground-text-disabled,
-        text-error: $light-color-scheme-foreground-text-error,
-        text-success: $light-color-scheme-foreground-text-success,
+    $datepicker: (
+        state-selected-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-today-color'),
+        state-selected-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-color'),
+        state-selected-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-background')
+    );
 
-        divider: $light-color-scheme-foreground-divider,
-        border: $light-color-scheme-foreground-border,
-        icon: $light-color-scheme-foreground-icon,
+    $divider: (
+        color: map-get($tokens, 'divider-#{$scheme}-color')
     );
 
-    $background: (
-        background: $light-color-scheme-background-background,
-        background-disabled: $light-color-scheme-background-background-disabled,
-        background-less-contrast: $light-color-scheme-background-background-less-contrast,
-        background-under: $light-color-scheme-background-background-under,
+    $dl: (
+        dt: map-get($tokens, 'description-list-#{$scheme}-dt'),
+        dd: map-get($tokens, 'description-list-#{$scheme}-dd')
+    );
 
-        overlay-hover: $light-color-scheme-background-overlay-hover,
-        overlay-active: $light-color-scheme-background-overlay-active,
-        overlay-disabled: $light-color-scheme-background-overlay-disabled
+    $form-field: (
+        border: map-get($tokens, 'form-field-#{$scheme}-border'),
+        background: map-get($tokens, 'form-field-#{$scheme}-background'),
+
+        state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
+        state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
     );
 
-    $theme: (
-        is-dark: false,
+    $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'),
 
-        primary: $primary,
-        second: $second,
-        error: $error,
+        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'),
 
-        foreground: $foreground,
-        background: $background,
+        state-valid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-text-color'),
+        state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
+    );
 
-        warning: $warning,
-        success: $success,
-        info: $info,
+    $forms: (
+        label: map-get($tokens, 'forms-#{$scheme}-label'),
+        legend: map-get($tokens, 'forms-#{$scheme}-legend'),
+    );
 
-        states: $states
+    $icon: (
+        primary: (
+            default: map-get($tokens, 'icon-#{$scheme}-primary-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-primary-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-primary-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-primary-states-disabled')
+        ),
+        secondary: (
+            default: map-get($tokens, 'icon-#{$scheme}-secondary-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-secondary-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-secondary-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-secondary-states-disabled')
+        ),
+        error: (
+            default: map-get($tokens, 'icon-#{$scheme}-error-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-error-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-error-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-error-states-disabled')
+        ),
+        warning: (
+            default: map-get($tokens, 'icon-#{$scheme}-warning-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-warning-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-warning-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-warning-states-disabled')
+        ),
+        info: (
+            default: map-get($tokens, 'icon-#{$scheme}-info-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-info-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-info-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-info-states-disabled')
+        ),
+        success: (
+            default: map-get($tokens, 'icon-#{$scheme}-success-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-success-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-success-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-success-states-disabled')
+        )
     );
 
-    @return map_merge($theme, (components: mc-light-theme-components($theme)));
-}
+    $link: (
+        text: map-get($tokens, 'link-#{$scheme}-text'),
+        border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom'),
 
-$dark-primary: mc-palette($dark-color-scheme-primary-palette, $dark-color-scheme-primary-default);
-$dark-second: mc-palette($dark-color-scheme-second-palette, $dark-color-scheme-second-default);
-$dark-error: mc-palette($dark-color-scheme-error-palette, $dark-color-scheme-error-default);
+        state-visited-text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
+        state-visited-border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom'),
 
-$dark-info: mc-palette($dark-color-scheme-info-palette, $dark-color-scheme-info-default);
-$dark-success: mc-palette($dark-color-scheme-success-palette, $dark-color-scheme-success-default);
-$dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme-warning-default);
+        state-hover-text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
+        state-hover-border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom'),
 
-@function mc-dark-theme(
-    $primary: $dark-primary,
-    $second: $dark-second,
+        state-active-text: map-get($tokens, 'link-#{$scheme}-state-active'),
+
+        state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+    );
+
+    $loader-overlay: (
+        background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
+
+        text: map-get($tokens, 'loader-overlay-#{$scheme}-text'),
+        caption: map-get($tokens, 'loader-overlay-#{$scheme}-caption'),
+    );
+
+    $modal: (
+        background-mask: map-get($tokens, 'modal-#{$scheme}-background-mask'),
+        shadow: map-get($tokens, 'modal-#{$scheme}-shadow'),
+        header-border: map-get($tokens, 'modal-header-#{$scheme}-border'),
+        body-top-shadow: map-get($tokens, 'modal-#{$scheme}-body-top-shadow'),
+        body-bottom-shadow: map-get($tokens, 'modal-#{$scheme}-body-bottom-shadow'),
+        footer-border: map-get($tokens, 'modal-footer-#{$scheme}-border')
+    );
+
+    $markdown: (
+        h1-color: map-get($tokens, 'markdown-h1-#{$scheme}-color'),
+        h2-color: map-get($tokens, 'markdown-h2-#{$scheme}-color'),
+        h3-color: map-get($tokens, 'markdown-h3-#{$scheme}-color'),
+        h4-color: map-get($tokens, 'markdown-h4-#{$scheme}-color'),
+        h5-color: map-get($tokens, 'markdown-h5-#{$scheme}-color'),
+        h6-color: map-get($tokens, 'markdown-h6-#{$scheme}-color'),
+
+        p-color: map-get($tokens, 'markdown-p-#{$scheme}-color'),
+
+        list-color: map-get($tokens, 'markdown-list-#{$scheme}-color'),
+
+        blockquote-text: map-get($tokens, 'markdown-blockquote-#{$scheme}-text'),
+        blockquote-line: map-get($tokens, 'markdown-blockquote-#{$scheme}-line'),
+        blockquote-background: map-get($tokens, 'markdown-blockquote-#{$scheme}-background'),
+        blockquote-border: map-get($tokens, 'markdown-blockquote-#{$scheme}-border'),
+
+        code-text: map-get($tokens, 'markdown-code-#{$scheme}-text'),
+        code-background: map-get($tokens, 'markdown-code-#{$scheme}-background'),
+        code-border: map-get($tokens, 'markdown-code-#{$scheme}-border'),
+
+        link-text: map-get($tokens, 'markdown-link-#{$scheme}-text'),
+        link-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-border-bottom'),
+
+        link-state-visited-text: map-get($tokens, 'markdown-link-#{$scheme}-state-visited-text'),
+        link-state-visited-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-state-visited-border-bottom'),
+
+        link-state-hover-text: map-get($tokens, 'markdown-link-#{$scheme}-state-hover-text'),
+        link-state-hover-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-state-hover-border-bottom'),
+
+        link-state-active-text: map-get($tokens, 'markdown-link-#{$scheme}-state-active'),
+
+        link-state-focused-outline: map-get($tokens, 'markdown-link-#{$scheme}-state-focused-outline'),
+
+        image-caption-text: map-get($tokens, 'markdown-image-#{$scheme}-caption-text'),
+
+        hr-color: map-get($tokens, 'markdown-hr-#{$scheme}-color'),
+
+        table-header: map-get($tokens, 'markdown-table-#{$scheme}-header'),
+        table-body: map-get($tokens, 'markdown-table-#{$scheme}-body'),
+        table-border: map-get($tokens, 'markdown-table-#{$scheme}-border')
+    );
+
+    $navbar: (
+        background: map-get($tokens, 'navbar-#{$scheme}-background'),
+
+        divider-background: map-get($tokens, 'navbar-#{$scheme}-divider-background')
+    );
+
+    $navbar-item: (
+        color: map-get($tokens, 'navbar-item-#{$scheme}-text'),
+        icon-color: map-get($tokens, 'navbar-item-#{$scheme}-icon'),
+
+        state-active: map-get($tokens, 'navbar-item-#{$scheme}-states-active'),
+        state-selected: map-get($tokens, 'navbar-item-#{$scheme}-states-selected'),
+        state-hover: map-get($tokens, 'navbar-item-#{$scheme}-states-hover'),
+        state-progress: map-get($tokens, 'navbar-item-#{$scheme}-states-progress'),
+        state-disabled-opacity: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-opacity'),
+    );
+
+    $popover: (
+        background: map-get($tokens, 'popover-#{$scheme}-background'),
+        text: map-get($tokens, 'popover-#{$scheme}-text'),
+        shadow: map-get($tokens, 'popover-#{$scheme}-shadow'),
+        border: map-get($tokens, 'popover-#{$scheme}-border'),
+
+        footer: (
+            background: map-get($tokens, 'popover-footer-#{$scheme}-background'),
+            border: map-get($tokens, 'popover-footer-#{$scheme}-border'),
+        ),
+
+        header: (
+            text: map-get($tokens, 'popover-header-#{$scheme}-text'),
+            background: map-get($tokens, 'popover-header-#{$scheme}-background'),
+            border: map-get($tokens, 'popover-header-#{$scheme}-border'),
+        )
+    );
+
+    $progress-bar: (
+        background: map-get($tokens, 'progress-bar-#{$scheme}-background')
+    );
+
+    $radio: (
+        outer-circle_border: map-get($tokens, 'radio-#{$scheme}-outer-circle-border'),
+        inner-circle_border: map-get($tokens, 'radio-#{$scheme}-inner-circle-border'),
+        cap-color: map-get($tokens, 'radio-#{$scheme}-cap-color'),
+
+        outer-circle_checked-state_border: map-get($tokens, 'radio-#{$scheme}-states-checked-outer-circle-border'),
+        outer-circle_focused-state_border: map-get($tokens, 'radio-#{$scheme}-states-focused-outer-circle-border'),
+        outer-circle_focused-state_shadow: map-get($tokens, 'radio-#{$scheme}-states-focused-outer-circle-shadow'),
+
+        inner-circle_checked-state_border: map-get($tokens, 'radio-#{$scheme}-states-checked-inner-circle-border'),
+        inner-circle_focused-state_shadow: map-get($tokens, 'radio-#{$scheme}-states-focused-inner-circle-shadow')
+    );
+
+    $sidepanel: (
+        border: map-get($tokens, 'sidepanel-#{$scheme}-border'),
+        header-border: map-get($tokens, 'sidepanel-header-#{$scheme}-border'),
+        footer-border: map-get($tokens, 'sidepanel-footer-#{$scheme}-border')
+    );
+
+    $tabs: (
+        border: map-get($tokens, 'tabs-#{$scheme}-border'),
+        state-normal-icon: map-get($tokens, 'tabs-#{$scheme}-state-normal-icon'),
+        state-normal-text: map-get($tokens, 'tabs-#{$scheme}-state-normal-text'),
+
+        state-hover-icon: map-get($tokens, 'tabs-#{$scheme}-state-hover-icon'),
+        state-hover-text: map-get($tokens, 'tabs-#{$scheme}-state-hover-text'),
+
+        state-active-marker: map-get($tokens, 'tabs-#{$scheme}-state-active-marker-color'),
+
+        state-empty-icon: map-get($tokens, 'tabs-#{$scheme}-state-empty-icon'),
+        state-empty-text: map-get($tokens, 'tabs-#{$scheme}-state-empty-text'),
+
+        state-disabled-icon: map-get($tokens, 'tabs-#{$scheme}-state-disabled-icon'),
+        state-disabled-text: map-get($tokens, 'tabs-#{$scheme}-state-disabled-text'),
+        state-disabled-marker-opacity: map-get($tokens, 'tabs-#{$scheme}-state-disabled-marker-opacity')
+    );
+
+    $vertical-tabs: (
+        state-normal-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-normal-background'),
+        state-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-selected-background'),
+        state-hover-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-background'),
+        state-hover-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-selected-background')
+    );
+
+    $tags: (
+        primary: (
+            border: map-get($tokens, 'tags-#{$scheme}-primary-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-primary-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-primary-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-primary-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-primary-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-primary-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-text')
+        ),
+        second: (
+            border: map-get($tokens, 'tags-#{$scheme}-second-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-second-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-second-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-second-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-second-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-second-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-text')
+        ),
+        error: (
+            border: map-get($tokens, 'tags-#{$scheme}-error-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-error-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-error-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-error-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-error-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-error-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-text')
+        )
+    );
+
+    $toggle: (
+        border: map-get($tokens, 'toggle-#{$scheme}-border'),
+        background: map-get($tokens, 'toggle-#{$scheme}-background'),
+
+        circle_border: map-get($tokens, 'toggle-#{$scheme}-circle-border'),
+        circle_background: map-get($tokens, 'toggle-#{$scheme}-circle-background'),
+
+        focused: map-get($tokens, 'toggle-#{$scheme}-states-focused-shadow'),
+
+        primary: (
+            checked_border: map-get($tokens, 'toggle-#{$scheme}-primary-checked-border-color'),
+            checked_background: map-get($tokens, 'toggle-#{$scheme}-primary-checked-background')
+        ),
+        error: (
+            checked_border: map-get($tokens, 'toggle-#{$scheme}-error-checked-border-color'),
+            checked_background: map-get($tokens, 'toggle-#{$scheme}-error-checked-background')
+        )
+    );
+
+    $timezone: (
+        text: map-get($tokens, 'timezone-option-#{$scheme}-text'),
+        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption')
+    );
+
+    $toast: (
+        background: map-get($tokens, 'toast-#{$scheme}-background'),
+        border: map-get($tokens, 'toast-#{$scheme}-border'),
+        text: map-get($tokens, 'toast-#{$scheme}-text'),
+        text-caption: map-get($tokens, 'toast-#{$scheme}-text-caption'),
+        shadow: map-get($tokens, 'toast-#{$scheme}-shadow'),
+
+        icon_info: map-get($tokens, 'toast-#{$scheme}-icon-info'),
+        icon_error: map-get($tokens, 'toast-#{$scheme}-icon-error'),
+        icon_success: map-get($tokens, 'toast-#{$scheme}-icon-success'),
+        icon_warning: map-get($tokens, 'toast-#{$scheme}-icon-warning')
+    );
+
+    $tooltip: (
+        background: map-get($tokens, 'tooltip-#{$scheme}-background'),
+        color: map-get($tokens, 'tooltip-#{$scheme}-text'),
+        shadow: map-get($tokens, 'tooltip-#{$scheme}-shadow'),
+
+        warning: (
+            background: map-get($tokens, 'tooltip-#{$scheme}-warning-background'),
+            color: map-get($tokens, 'tooltip-#{$scheme}-warning-text'),
+            border-color: map-get($tokens, 'tooltip-#{$scheme}-warning-border')
+        ),
+        extended: (
+            background: map-get($tokens, 'extended-tooltip-#{$scheme}-background'),
+            color: map-get($tokens, 'extended-tooltip-#{$scheme}-text'),
+            border-color: map-get($tokens, 'extended-tooltip-#{$scheme}-border'),
+
+            header-background: map-get($tokens, 'extended-tooltip-header-#{$scheme}-background'),
+            header-color: map-get($tokens, 'extended-tooltip-header-#{$scheme}-text'),
+            header-border-color: map-get($tokens, 'extended-tooltip-header-#{$scheme}-border')
+        )
+    );
+
+    $scrollbar: (
+        track: map-get($tokens, 'scrollbar-#{$scheme}-track'),
+        thumb: (
+            normal: map-get($tokens, 'scrollbar-#{$scheme}-thumb-normal'),
+            hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover'),
+            active: map-get($tokens, 'scrollbar-#{$scheme}-thumb-active'),
+            disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled')
+        ),
+        arrow: (
+            normal: map-get($tokens, 'scrollbar-#{$scheme}-arrow-normal'),
+            disabled: map-get($tokens, 'scrollbar-#{$scheme}-arrow-disabled'),
+            background: map-get($tokens, 'scrollbar-#{$scheme}-arrow-background')
+        ),
+        corner-background: map-get($tokens, 'scrollbar-#{$scheme}-corner-background'),
+        resizer-background: map-get($tokens, 'scrollbar-#{$scheme}-resizer-background')
+    );
+
+    @return (
+        alert: $alert,
+        popup: $popup,
+        badge: $badge,
+        button: $button,
+        card: $card,
+        checkbox: $checkbox,
+        code-block: $code-block,
+        datepicker: $datepicker,
+        divider: $divider,
+        dl: $dl,
+        form-field: $form-field,
+        form-field-password-hint: $form-field-password-hint,
+        forms: $forms,
+        icon: $icon,
+        link: $link,
+        loader-overlay: $loader-overlay,
+        modal: $modal,
+        markdown: $markdown,
+        navbar: $navbar,
+        navbar-item: $navbar-item,
+        popover: $popover,
+        progress-bar: $progress-bar,
+        radio: $radio,
+        sidepanel: $sidepanel,
+        tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
+        tags: $tags,
+        timezone: $timezone,
+        toast: $toast,
+        toggle: $toggle,
+        tooltip: $tooltip,
+        scrollbar: $scrollbar
+    );
+}
+
+
+
+@function mc-contrast($palette, $hue) {
+    @return map-get(map-get($palette, contrast), $hue);
+}
+
+@function mc-palette($base-palette, $default) {
+    $result: map_merge($base-palette, (default: $default));
+
+    // For each hue in the palette, add a "-contrast" color to the map.
+    @each $hue, $color in $base-palette {
+        $result: map_merge($result, ('#{$hue}-contrast': mc-contrast($base-palette, $hue)));
+    }
+
+    @return $result;
+}
+
+@function mc-color($palette, $hue: default, $opacity: null) {
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+        @return mc-color($palette, default, $hue);
+    }
+
+    $color: map-get($palette, $hue);
+    $opacity: if($opacity == null, opacity($color), $opacity);
+
+    @return rgba($color, $opacity);
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin mc-core-theme($theme) {
+    .mc-app-background {
+        $background: map-get($theme, background);
+        $foreground: map-get($theme, foreground);
+
+        background-color: mc-color($background, background);
+        color: mc-color($foreground, text);
+    }
+
+    .mc-theme-loaded-marker {
+        display: none;
+    }
+
+    .mc-primary {
+        color: mc-color(map-get($theme, primary));
+    }
+
+    .mc-error {
+        color: mc-color(map-get($theme, error));
+    }
+
+    .mc-warning {
+        color: mc-color(map-get($theme, warning));
+    }
+
+    .mc-success {
+        color: mc-color(map-get($theme, success));
+    }
+
+    .mc-info {
+        color: mc-color(map-get($theme, info));
+    }
+}
+
+
+$light-primary: mc-palette($light-color-scheme-primary-palette, $light-color-scheme-primary-default);
+$light-second: mc-palette($light-color-scheme-second-palette, $light-color-scheme-second-default);
+$light-error: mc-palette($light-color-scheme-error-palette, $light-color-scheme-error-default);
+
+$light-info: mc-palette($light-color-scheme-info-palette, $light-color-scheme-info-default);
+$light-success: mc-palette($light-color-scheme-success-palette, $light-color-scheme-success-default);
+$light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-scheme-warning-default);
+
+@function mc-light-theme_import(
+    $primary: $light-primary,
+    $second: $light-second,
+    $error: $light-error,
+    $info: $light-info,
+    $success: $light-success,
+    $warning: $light-warning
+) {
+    $states: (
+        focused-color: $light-color-scheme-states-focused-color,
+        selected-color: $light-color-scheme-states-selected-color,
+        pressed-shadow: $light-color-scheme-states-pressed-shadow,
+        disabled-opacity: $light-color-scheme-states-disabled-opacity
+    );
+
+    $foreground: (
+        text: $light-color-scheme-foreground-text,
+        text-less-contrast: $light-color-scheme-foreground-text-less-contrast,
+        text-disabled: $light-color-scheme-foreground-text-disabled,
+        text-error: $light-color-scheme-foreground-text-error,
+        text-success: $light-color-scheme-foreground-text-success,
+
+        divider: $light-color-scheme-foreground-divider,
+        border: $light-color-scheme-foreground-border,
+        icon: $light-color-scheme-foreground-icon,
+    );
+
+    $background: (
+        background: $light-color-scheme-background-background,
+        background-disabled: $light-color-scheme-background-background-disabled,
+        background-less-contrast: $light-color-scheme-background-background-less-contrast,
+        background-under: $light-color-scheme-background-background-under,
+
+        overlay-hover: $light-color-scheme-background-overlay-hover,
+        overlay-active: $light-color-scheme-background-overlay-active,
+        overlay-disabled: $light-color-scheme-background-overlay-disabled
+    );
+
+    $theme: (
+        is-dark: false,
+
+        primary: $primary,
+        second: $second,
+        error: $error,
+
+        foreground: $foreground,
+        background: $background,
+
+        warning: $warning,
+        success: $success,
+        info: $info,
+
+        states: $states
+    );
+
+    @return map_merge($theme, (components: mc-light-theme-components($theme)));
+}
+
+$dark-primary: mc-palette($dark-color-scheme-primary-palette, $dark-color-scheme-primary-default);
+$dark-second: mc-palette($dark-color-scheme-second-palette, $dark-color-scheme-second-default);
+$dark-error: mc-palette($dark-color-scheme-error-palette, $dark-color-scheme-error-default);
+
+$dark-info: mc-palette($dark-color-scheme-info-palette, $dark-color-scheme-info-default);
+$dark-success: mc-palette($dark-color-scheme-success-palette, $dark-color-scheme-success-default);
+$dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme-warning-default);
+
+@function mc-dark-theme_import(
+    $primary: $dark-primary,
+    $second: $dark-second,
     $error: $dark-error,
     $info: $dark-info,
     $success: $dark-success,
@@ -4460,6 +5786,95 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 }
 
 
+@function _theme_states($tokens, $scheme) {
+    @return (
+        focused-color: map-get($tokens, '#{$scheme}-states-focused-color'),
+        selected-color: map-get($tokens, '#{$scheme}-states-selected-color'),
+        pressed-shadow: map-get($tokens, '#{$scheme}-states-pressed-shadow'),
+        disabled-opacity: map-get($tokens, '#{$scheme}-states-disabled-opacity')
+    );
+}
+
+@function _theme_foreground($tokens, $scheme) {
+    @return (
+        text: map-get($tokens, '#{$scheme}-foreground-text'),
+        text-less-contrast: map-get($tokens, '#{$scheme}-foreground-text-less-contrast'),
+        text-disabled: map-get($tokens, '#{$scheme}-foreground-text-disabled'),
+        text-error: map-get($tokens, '#{$scheme}-foreground-text-error'),
+        text-success: map-get($tokens, '#{$scheme}-foreground-text-success'),
+
+        divider: map-get($tokens, '#{$scheme}-foreground-divider'),
+        border: map-get($tokens, '#{$scheme}-foreground-border'),
+        icon: map-get($tokens, '#{$scheme}-foreground-icon'),
+    );
+}
+
+@function _theme_background($tokens, $scheme) {
+    @return (
+        background: map-get($tokens, '#{$scheme}-background-background'),
+        background-disabled: map-get($tokens, '#{$scheme}-background-background-disabled'),
+        background-less-contrast: map-get($tokens, '#{$scheme}-background-background-less-contrast'),
+        background-under: map-get($tokens, '#{$scheme}-background-background-under'),
+
+        overlay-hover: map-get($tokens, '#{$scheme}-background-overlay-hover'),
+        overlay-active: map-get($tokens, '#{$scheme}-background-overlay-active'),
+        overlay-disabled: map-get($tokens, '#{$scheme}-background-overlay-disabled')
+    );
+}
+
+@function _theme_palette($tokens, $scheme, $name) {
+    @return mc-palette(
+        map-get($tokens, '#{$scheme}-#{$name}-palette'), map-get($tokens, '#{$scheme}-#{$name}-default')
+    )
+}
+
+@function mc-light-theme($tokens) {
+    $scheme: 'light-color-scheme';
+
+    @return (
+        is-dark: false,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        primary: _theme_palette($tokens, $scheme, primary),
+        second: _theme_palette($tokens, $scheme, second),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: mc-components-theme($tokens, $scheme)
+    );
+}
+
+@function mc-dark-theme($tokens) {
+    $scheme: 'dark-color-scheme';
+
+    @return (
+        is-dark: true,
+
+        background: _theme_background($tokens, $scheme),
+        foreground: _theme_foreground($tokens, $scheme),
+
+        primary: _theme_palette($tokens, $scheme, primary),
+        second: _theme_palette($tokens, $scheme, second),
+        error: _theme_palette($tokens, $scheme, error),
+
+        warning: _theme_palette($tokens, $scheme, warning),
+        success: _theme_palette($tokens, $scheme, success),
+        info: _theme_palette($tokens, $scheme, info),
+
+        states: _theme_states($tokens, $scheme),
+
+        components: mc-components-theme($tokens, $scheme)
+    );
+}
+
+
 @function mc-typography-level(
     $font-size,
     $line-height: $font-size,
@@ -5317,6 +6732,335 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 
 
+@mixin 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-code-block_single-file {
+            .mc-tab-label {
+                user-select: text !important;
+                color: inherit !important;
+            }
+        }
+
+        .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 mc-code-block-typography($config) {
+    .mc-code-block {
+        @include mc-typography-level-to-styles($config, $code-block-font-default);
+
+        & .hljs-ln-numbers {
+            @include mc-typography-level-to-styles($config, caption-mono);
+        }
+    }
+}
+
+
+
+
+
 
 
 
@@ -5351,10 +7095,6 @@ $mc-datepicker-today-fade-amount: 0.2;
         background: map-get($foreground, divider);
     }
 
-    .mc-calendar__body-label {
-        color: map-get($foreground, text);
-    }
-
     .mc-calendar__body-cell-content {
         color: map-get($foreground, text);
         border-color: transparent;
@@ -5384,7 +7124,6 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
-        // todo border-color: fade-out(map-get($foreground, text), $mc-datepicker-today-fade-amount);
         border-color: map-get($background, background-disabled);
     }
 
@@ -5413,10 +7152,6 @@ $mc-datepicker-today-fade-amount: 0.2;
         @include mc-typography-level-to-styles($config, $datepicker-calendar-font-header);
     }
 
-    .mc-calendar__body-label {
-        @include mc-typography-level-to-styles($config, $datepicker-body-font-label);
-    }
-
     .mc-calendar__body-today {
         @include mc-typography-level-to-styles($config, $datepicker-body-font-today);
     }
@@ -5611,6 +7346,7 @@ $mc-datepicker-today-fade-amount: 0.2;
                 .mc-input,
                 .mc-textarea {
                     color: map-get($foreground, text-disabled);
+                    -webkit-text-fill-color: map-get($foreground, text-disabled);
                 }
             }
             /* stylelint-enable no-descending-specificity */
@@ -6656,7 +8392,8 @@ button {
             border-left-color: map-get($foreground, divider);
         }
 
-        &[disabled] {
+        &[disabled],
+        &.mc-disabled {
             pointer-events: none;
 
             & .mc-icon {
@@ -6702,7 +8439,8 @@ button {
             }
         }
 
-        &[disabled] {
+        &[disabled],
+        &.mc-disabled {
             cursor: default;
 
             color: map-get($tabs, state-disabled-text);
@@ -6760,7 +8498,8 @@ button {
             }
         }
 
-        &[disabled] {
+        &[disabled],
+        &.mc-disabled {
             cursor: default;
 
             color: map-get($tabs, state-disabled-text);
@@ -6826,7 +8565,8 @@ button {
             }
         }
 
-        &[disabled] {
+        &[disabled],
+        &.mc-disabled {
             cursor: default;
             background: map-get($vertical-tabs, state-normal-background);
 
@@ -7584,6 +9324,7 @@ button {
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
     @include mc-checkbox-typography($config);
+    @include mc-code-block-typography($config);
     @include mc-datepicker-typography($config);
     @include mc-dropdown-typography($config);
     @include mc-dl-typography($config);
@@ -7870,6 +9611,7 @@ button {
 
 
 
+
 @mixin mc-divider-theme($theme) {
     $divider: map-get(map-get($theme, components), divider);
 
@@ -8310,6 +10052,7 @@ button {
     @include mc-button-theme($theme);
     @include mc-card-theme($theme);
     @include mc-checkbox-theme($theme);
+    @include mc-code-block-theme($theme);
     @include mc-datepicker-theme($theme);
     @include mc-dl-theme($theme);
     @include mc-divider-theme($theme);