@ptsecurity/mosaic 17.0.0 → 17.2.0

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

@@ -3,13 +3,14 @@
 @use 'sass:list';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 @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);
+        background-color: mc-css-variable(code-block-main-background, map-get($code-block, main-background));
+        border-color: mc-css-variable(code-block-border, map-get($code-block, border));
 
         .hljs {
             $hljs: map.get($code-block, hljs);
@@ -18,275 +19,360 @@
             overflow-x: auto;
 
             &-addition {
-                background-color: map.get($hljs, addition-background);
-                color: map.get($hljs, addition-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-addition-background, map-get($hljs, addition-background)
+                );
+                color: mc-css-variable(code-block-hljs-addition-color, map-get($hljs, addition-color));
             }
 
             &-attr {
-                background-color: map.get($hljs, attr-background);
-                color: map.get($hljs, attr-color);
+                background-color: mc-css-variable(code-block-hljs-attr-background, map-get($hljs, attr-background));
+                color: mc-css-variable(code-block-hljs-attr-color, map-get($hljs, attr-color));
             }
 
             &-attribute {
-                background-color: map.get($hljs, attribute-background);
-                color: map.get($hljs, attribute-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-attribute-background, map-get($hljs, attribute-background)
+                );
+                color: mc-css-variable(code-block-hljs-attribute-color, map-get($hljs, attribute-color));
             }
 
             &-built_in {
-                background-color: map.get($hljs, built_in-background);
-                color: map.get($hljs, built_in-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-built_in-background, map-get($hljs, built_in-background)
+                );
+                color: mc-css-variable(code-block-hljs-built_in-color, map-get($hljs, built_in-color));
             }
 
             &-bullet {
-                background-color: map.get($hljs, bullet-background);
-                color: map.get($hljs, bullet-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-bullet-background, map-get($hljs, bullet-background)
+                );
+                color: mc-css-variable(code-block-hljs-bullet-color, map-get($hljs, bullet-color));
             }
 
             &-char-escape {
-                background-color: map.get($hljs, char-escape-background);
-                color: map.get($hljs, char-escape-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-char-escape-background, map-get($hljs, char-escape-background)
+                );
+                color: mc-css-variable(code-block-hljs-char-escape-color, map-get($hljs, char-escape-color));
             }
 
             &-class {
-                background-color: map.get($hljs, class-background);
-                color: map.get($hljs, class-color);
+                background-color: mc-css-variable(code-block-hljs-class-background, map-get($hljs, class-background));
+                color: mc-css-variable(code-block-hljs-class-color, map-get($hljs, class-color));
             }
 
             &-code {
-                background-color: map.get($hljs, code-background);
-                color: map.get($hljs, code-color);
+                background-color: mc-css-variable(code-block-hljs-code-background, map-get($hljs, code-background));
+                color: mc-css-variable(code-block-hljs-code-color, map-get($hljs, code-color));
             }
 
             &-comment {
-                background-color: map.get($hljs, comment-background);
-                color: map.get($hljs, comment-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-comment-background, map-get($hljs, comment-background)
+                );
+                color: mc-css-variable(code-block-hljs-comment-color, map-get($hljs, comment-color));
             }
 
             &-deletion {
-                background-color: map.get($hljs, deletion-background);
-                color: map.get($hljs, deletion-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-deletion-background, map-get($hljs, deletion-background)
+                );
+                color: mc-css-variable(code-block-hljs-deletion-color, map-get($hljs, deletion-color));
             }
 
             &-doctag {
-                background-color: map.get($hljs, doctag-background);
-                color: map.get($hljs, doctag-color);
+                background-color: mc-css-variable(code-block-hljs-doctag-background, map-get($hljs, doctag-background));
+                color: mc-css-variable(code-block-hljs-doctag-color, map-get($hljs, doctag-color));
             }
 
             &-emphasis {
-                background-color: map.get($hljs, emphasis-background);
-                color: map.get($hljs, emphasis-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-emphasis-background, map-get($hljs, emphasis-background)
+                );
+                color: mc-css-variable(code-block-hljs-emphasis-color, map-get($hljs, emphasis-color));
             }
 
             &-formula {
-                background-color: map.get($hljs, formula-background);
-                color: map.get($hljs, formula-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-formula-background, map-get($hljs, formula-background)
+                );
+                color: mc-css-variable(code-block-hljs-formula-color, map-get($hljs, formula-color));
             }
 
             &-function {
-                background-color: map.get($hljs, function-background);
-                color: map.get($hljs, function-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-function-background, map-get($hljs, function-background)
+                );
+                color: mc-css-variable(code-block-hljs-function-color, map-get($hljs, function-color));
             }
 
             &-keyword {
-                background-color: map.get($hljs, keyword-background);
-                color: map.get($hljs, keyword-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-keyword-background, map-get($hljs, keyword-background)
+                );
+                color: mc-css-variable(code-block-hljs-keyword-color, map-get($hljs, keyword-color));
             }
 
             &-link {
-                background-color: map.get($hljs, link-background);
-                color: map.get($hljs, link-color);
+                background-color: mc-css-variable(code-block-hljs-link-background, map-get($hljs, link-background));
+                color: mc-css-variable(code-block-hljs-link-color, map-get($hljs, link-color));
             }
 
             &-literal {
-                background-color: map.get($hljs, literal-background);
-                color: map.get($hljs, literal-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-literal-background, map-get($hljs, literal-background)
+                );
+                color: mc-css-variable(code-block-hljs-literal-color, map-get($hljs, literal-color));
             }
 
             &-meta {
-                background-color: map.get($hljs, meta-background);
-                color: map.get($hljs, meta-color);
+                background-color: mc-css-variable(code-block-hljs-meta-background, map-get($hljs, meta-background));
+                color: mc-css-variable(code-block-hljs-meta-color, map-get($hljs, meta-color));
             }
 
             &-meta-keyword {
-                background-color: map.get($hljs, meta-keyword-background);
-                color: map.get($hljs, meta-keyword-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-meta-keyword-background, map-get($hljs, meta-keyword-background)
+                );
+                color: mc-css-variable(code-block-hljs-meta-keyword-color, map-get($hljs, meta-keyword-color));
             }
 
             &-meta-string {
-                background-color: map.get($hljs, meta-string-background);
-                color: map.get($hljs, meta-string-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-meta-string-background, map-get($hljs, meta-string-background)
+                );
+                color: mc-css-variable(code-block-hljs-meta-string-color, map-get($hljs, meta-string-color));
             }
 
             &-meta-prompt {
-                background-color: map.get($hljs, meta-prompt-background);
-                color: map.get($hljs, meta-prompt-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-meta-prompt-background, map-get($hljs, meta-prompt-background)
+                );
+                color: mc-css-variable(code-block-hljs-meta-prompt-color, map-get($hljs, meta-prompt-color));
             }
 
             &-name {
-                background-color: map.get($hljs, name-background);
-                color: map.get($hljs, name-color);
+                background-color: mc-css-variable(code-block-hljs-name-background, map-get($hljs, name-background));
+                color: mc-css-variable(code-block-hljs-name-color, map-get($hljs, name-color));
             }
 
             &-number {
-                background-color: map.get($hljs, number-background);
-                color: map.get($hljs, number-color);
+                background-color: mc-css-variable(code-block-hljs-number-background, map-get($hljs, number-background));
+                color: mc-css-variable(code-block-hljs-number-color, map-get($hljs, number-color));
             }
 
             &-operator {
-                background-color: map.get($hljs, operator-background);
-                color: map.get($hljs, operator-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-operator-background, map-get($hljs, operator-background)
+                );
+                color: mc-css-variable(code-block-hljs-operator-color, map-get($hljs, operator-color));
             }
 
             &-params {
-                background-color: map.get($hljs, params-background);
-                color: map.get($hljs, params-color);
+                background-color: mc-css-variable(code-block-hljs-params-background, map-get($hljs, params-background));
+                color: mc-css-variable(code-block-hljs-params-color, map-get($hljs, params-color));
             }
 
             &-property {
-                background-color: map.get($hljs, property-background);
-                color: map.get($hljs, property-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-property-background, map-get($hljs, property-background)
+                );
+                color: mc-css-variable(code-block-hljs-property-color, map-get($hljs, property-color));
             }
 
             &-punctuation {
-                background-color: map.get($hljs, punctuation-background);
-                color: map.get($hljs, punctuation-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-punctuation-background, map-get($hljs, punctuation-background)
+                );
+                color: mc-css-variable(code-block-hljs-punctuation-color, map-get($hljs, punctuation-color));
             }
 
             &-quote {
-                background-color: map.get($hljs, quote-background);
-                color: map.get($hljs, quote-color);
+                background-color: mc-css-variable(code-block-hljs-quote-background, map-get($hljs, quote-background));
+                color: mc-css-variable(code-block-hljs-quote-color, map-get($hljs, quote-color));
             }
 
             &-regexp {
-                background-color: map.get($hljs, regexp-background);
-                color: map.get($hljs, regexp-color);
+                background-color: mc-css-variable(code-block-hljs-regexp-background, map-get($hljs, regexp-background));
+                color: mc-css-variable(code-block-hljs-regexp-color, map-get($hljs, regexp-color));
             }
 
             &-section {
-                background-color: map.get($hljs, section-background);
-                color: map.get($hljs, section-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-section-background, map-get($hljs, section-background)
+                );
+                color: mc-css-variable(code-block-hljs-section-color, map-get($hljs, section-color));
             }
 
             &-selector-attr {
-                background-color: map.get($hljs, selector-attr-background);
-                color: map.get($hljs, selector-attr-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-selector-attr-background, map-get($hljs, selector-attr-background)
+                );
+                color: mc-css-variable(code-block-hljs-selector-attr-color, map-get($hljs, selector-attr-color));
             }
 
             &-selector-class {
-                background-color: map.get($hljs, selector-class-background);
-                color: map.get($hljs, selector-class-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-selector-class-background, map-get($hljs, selector-class-background)
+                );
+                color: mc-css-variable(code-block-hljs-selector-class-color, map-get($hljs, selector-class-color));
             }
 
             &-selector-id {
-                background-color: map.get($hljs, selector-id-background);
-                color: map.get($hljs, selector-id-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-selector-id-background, map-get($hljs, selector-id-background)
+                );
+                color: mc-css-variable(code-block-hljs-selector-id-color, map-get($hljs, selector-id-color));
             }
 
             &-selector-pseudo {
-                background-color: map.get($hljs, selector-pseudo-background);
-                color: map.get($hljs, selector-pseudo-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-selector-pseudo-background, map-get($hljs, selector-pseudo-background)
+                );
+                color: mc-css-variable(code-block-hljs-selector-pseudo-color, map-get($hljs, selector-pseudo-color));
             }
 
             &-selector-tag {
-                background-color: map.get($hljs, selector-tag-background);
-                color: map.get($hljs, selector-tag-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-selector-tag-background, map-get($hljs, selector-tag-background)
+                );
+                color: mc-css-variable(code-block-hljs-selector-tag-color, map-get($hljs, selector-tag-color));
             }
 
             &-string {
-                background-color: map.get($hljs, string-background);
-                color: map.get($hljs, string-color);
+                background-color: mc-css-variable(code-block-hljs-string-background, map-get($hljs, string-background));
+                color: mc-css-variable(code-block-hljs-string-color, map-get($hljs, string-color));
             }
 
             &-strong {
-                background-color: map.get($hljs, strong-background);
-                color: map.get($hljs, strong-color);
+                background-color: mc-css-variable(code-block-hljs-strong-background, map-get($hljs, strong-background));
+                color: mc-css-variable(code-block-hljs-strong-color, map-get($hljs, strong-color));
             }
 
             &-subst {
-                background-color: map.get($hljs, subst-background);
-                color: map.get($hljs, subst-color);
+                background-color: mc-css-variable(code-block-hljs-subst-background, map-get($hljs, subst-background));
+                color: mc-css-variable(code-block-hljs-subst-color, map-get($hljs, subst-color));
             }
 
             &-symbol {
-                background-color: map.get($hljs, symbol-background);
-                color: map.get($hljs, symbol-color);
+                background-color: mc-css-variable(code-block-hljs-symbol-background, map-get($hljs, symbol-background));
+                color: mc-css-variable(code-block-hljs-symbol-color, map-get($hljs, symbol-color));
             }
 
             &-tag {
-                background-color: map.get($hljs, tag-background);
-                color: map.get($hljs, tag-color);
+                background-color: mc-css-variable(code-block-hljs-tag-background, map-get($hljs, tag-background));
+                color: mc-css-variable(code-block-hljs-tag-color, map-get($hljs, tag-color));
             }
 
             &-template-tag {
-                background-color: map.get($hljs, template-tag-background);
-                color: map.get($hljs, template-tag-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-template-tag-background, map-get($hljs, template-tag-background)
+                );
+                color: mc-css-variable(code-block-hljs-template-tag-color, map-get($hljs, template-tag-color));
             }
 
             &-template-variable {
-                background-color: map.get($hljs, template-variable-background);
-                color: map.get($hljs, template-variable-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-template-variable-background, map-get($hljs, template-variable-background)
+                );
+                color: mc-css-variable(
+                    code-block-hljs-template-variable-color, map-get($hljs, template-variable-color)
+                );
             }
 
             &-title {
-                background-color: map.get($hljs, title-background);
-                color: map.get($hljs, title-color);
+                background-color: mc-css-variable(code-block-hljs-title-background, map-get($hljs, title-background));
+                color: mc-css-variable(code-block-hljs-title-color, map-get($hljs, title-color));
             }
 
             &-title-class {
-                background-color: map.get($hljs, title-class-background);
-                color: map.get($hljs, title-class-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-title-class-background, map-get($hljs, title-class-background)
+                );
+                color: mc-css-variable(code-block-hljs-title-class-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);
+                background-color: mc-css-variable(
+                    code-block-hljs-title-class-inherited-background, map-get($hljs, title-class-inherited-background)
+                );
+                color: mc-css-variable(
+                    code-block-hljs-title-class-inherited-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);
+                background-color: mc-css-variable(
+                    code-block-hljs-title-function-background, map-get($hljs, title-function-background)
+                );
+                color: mc-css-variable(code-block-hljs-title-function-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);
+                background-color: mc-css-variable(
+                    code-block-hljs-title-function-invoke-background, map-get($hljs, title-function-invoke-background)
+                );
+                color: mc-css-variable(
+                    code-block-hljs-title-function-invoke-color, map-get($hljs, title-function-invoke-color)
+                );
             }
 
             &-type {
-                background-color: map.get($hljs, type-background);
-                color: map.get($hljs, type-color);
+                background-color: mc-css-variable(code-block-hljs-type-background, map-get($hljs, type-background));
+                color: mc-css-variable(code-block-hljs-type-color, map-get($hljs, type-color));
             }
 
             &-variable {
-                background-color: map.get($hljs, variable-background);
-                color: map.get($hljs, variable-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-variable-background, map-get($hljs, variable-background)
+                );
+                color: mc-css-variable(code-block-hljs-variable-color, map-get($hljs, variable-color));
             }
 
             &-variable-constant {
-                background-color: map.get($hljs, variable-constant-background);
-                color: map.get($hljs, variable-constant-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-variable-constant-background, map-get($hljs, variable-constant-background)
+                );
+                color: mc-css-variable(
+                    code-block-hljs-variable-constant-color, map-get($hljs, variable-constant-color)
+                );
             }
 
             &-variable-language {
-                background-color: map.get($hljs, variable-language-background);
-                color: map.get($hljs, variable-language-color);
+                background-color: mc-css-variable(
+                    code-block-hljs-variable-language-background, map-get($hljs, variable-language-background)
+                );
+                color: mc-css-variable(
+                    code-block-hljs-variable-language-color, map-get($hljs, variable-language-color)
+                );
             }
 
             &-ln-n {
-                color: map.get($code-block, line-numbers-color);
+                color: mc-css-variable(code-block-line-numbers-color, map-get($code-block, line-numbers-color));
             }
 
             &-line-numbers {
-                color: map.get($code-block, main-code-color);
+                color: mc-css-variable(code-block-main-code-color, map-get($code-block, main-code-color));
             }
         }
 
         &.mc-code-block_less-contrast {
-            background-color: map.get($code-block, main-background-less-contrast);
+            background-color: mc-css-variable(
+                code-block-main-background-less-contrast, 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);
+            background: mc-css-variable(code-block-border, map-get($code-block, border));
         }
 
         .mc-tab-header {
@@ -297,17 +383,19 @@
         }
 
         .mc-code-block__show-more {
-            border-top-color: map.get($code-block, border) !important;
+            border-top-color: mc-css-variable(code-block-border, map-get($code-block, border));
         }
     }
 
     .mc-code-block-actionbar {
         .mc-code-block-actionbar_less-contrast {
-            background-color: map-get($code-block, actionbar, bg-less-contrast);
+            background-color: mc-css-variable(
+                code-block-actionbar-bg-less-contrast, map-get($code-block, actionbar, bg-less-contrast)
+            );
         }
 
         &.mc-actionbar-block_floating {
-            background-color: map-get($code-block, actionbar, bg);
+            background-color: mc-css-variable(code-block-actionbar-bg, map-get($code-block, actionbar, bg));
         }
     }
 }
@@ -316,7 +404,7 @@
     $tokens: map.get($config, tokens);
 
     .mc-code-block {
-        @include mc-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+        @include mc-typography-css-variables(code-block, default);
 
         & .mc-code-block__code {
             font: inherit;
@@ -326,7 +414,7 @@
             }
         }
 
-        .hljs-ln-numbers {
+        & .hljs-ln-numbers {
             @include mc-typography-level-to-styles($config, caption-mono);
         }
     }

package/code-block/actionbar.component.scss

@@ -1,9 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .mc-code-block-actionbar {
@@ -16,12 +14,12 @@ $tokens: meta.module-variables(tokens) !default;
     top: 4px;
     right: 8px;
 
-    gap: map.get($tokens, code-block-size-actionbar-gap);
+    gap: mc-css-variable(code-block-size-actionbar-gap);
 
-    border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
+    border-radius: mc-css-variable(code-block-size-actionbar-border-radius);
 
     &.mc-actionbar-block_floating {
-        top: map.get($tokens, code-block-size-actionbar-margin-top);
-        right: map.get($tokens, code-block-size-actionbar-margin-right);
+        top: mc-css-variable(code-block-size-actionbar-margin-top);
+        right: mc-css-variable(code-block-size-actionbar-margin-right);
     }
 }

package/code-block/code-block.scss

@@ -1,8 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 /* stylelint-disable no-descending-specificity */
@@ -19,7 +18,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     border-width: 1px;
     border-style: solid;
-    border-radius: map.get($tokens, code-block-size-border-radius);
+    border-radius: mc-css-variable(code-block-size-border-radius);
 
     &:not(.mc-code-block_no-header) .mc-tab-group:after {
         content: "";
@@ -90,7 +89,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     > code {
-        padding: map.get($tokens, code-block-size-padding) !important;
+        padding: mc-css-variable(code-block-size-padding);
     }
 
     .hljs-ln {
@@ -102,8 +101,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .hljs-ln-numbers {
-        border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
-        padding: map.get($tokens, code-block-size-line-numbers-padding);
+        border-right-width: mc-css-variable(code-block-size-line-numbers-border-width);
+        padding: mc-css-variable(code-block-size-line-numbers-padding);
 
         vertical-align: baseline;
         text-align: right;