@ptsecurity/mosaic 17.0.0 → 17.2.0

package/link/_link-theme.scss

@@ -2,11 +2,13 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-link($foreground, $link, $tokens) {
+
+@mixin mc-link($foreground, $link) {
     display: inline-block;
 
-    color: map.get($link, text);
+    color: mc-css-variable(link-text, map-get($link, text));
     text-decoration: none;
     cursor: pointer;
 
@@ -18,27 +20,31 @@
 
     /* stylelint-disable no-descending-specificity */
     &:hover {
-        color: map.get($link, state-hover-text);
+        color: mc-css-variable(link-state-hover-text, map-get($link, state-hover-text));
         transition: color 0ms;
 
         &.mc-text-only,
         &.mc-text-with-icon .mc-link__text {
-            border-bottom-color: map.get($link, state-hover-border-bottom);
+            border-bottom-color: mc-css-variable(
+                link-state-hover-border-bottom, map-get($link, state-hover-border-bottom));
         }
 
         & .mc-icon {
-            color: map.get($link, state-hover-text);
+            color: mc-css-variable(link-state-hover-text, map-get($link, state-hover-text));
         }
     }
 
-    &:active {
-        color: map.get($link, state-active-text);
+    &:active,
+    &.mc-active {
+        color: mc-css-variable(link-state-active-text, map-get($link, state-active-text));
     }
 
     &.cdk-keyboard-focused {
-        outline: map.get($link, state-focused-outline) solid map.get($tokens, link-size-state-focused-outline-width);
+        outline: mc-css-variable(
+            link-state-focused-outline, map-get($link, state-focused-outline)
+        ) solid mc-css-variable(link-size-state-focused-outline-width);
 
-        outline-offset: map.get($tokens, link-size-state-focused-outline-offset);
+        outline-offset: mc-css-variable(link-size-state-focused-outline-offset);
     }
 
     & .mc-icon {
@@ -49,16 +55,16 @@
     &.mc-text-with-icon .mc-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
-        border-bottom-color: map.get($link, border-bottom);
+        border-bottom-color: mc-css-variable(link-border-bottom, map-get($link, border-bottom));
     }
 
     &.mc-text-with-icon .mc-link__text {
         &:not(:first-child) {
-            margin-left: map.get($tokens, link-size-default-icon-margin);
+            margin-left: mc-css-variable(link-size-default-icon-margin);
         }
 
         &:not(:last-child) {
-            margin-right: map.get($tokens, link-size-default-icon-margin);
+            margin-right: mc-css-variable(link-size-default-icon-margin);
         }
     }
 
@@ -73,7 +79,8 @@
         &:hover {
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
-                border-bottom-color: map.get($link, state-hover-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    link-state-hover-border-bottom, map-get($link, state-hover-border-bottom));
             }
         }
 
@@ -95,28 +102,28 @@
     &.mc-link_caption {
         &.mc-text-with-icon .mc-link__text {
             &:not(:first-child) {
-                margin-left: map.get($tokens, link-size-caption-icon-margin);
+                margin-left: mc-css-variable(link-size-caption-icon-margin);
             }
 
             &:not(:last-child) {
-                margin-right: map.get($tokens, link-size-caption-icon-margin);
+                margin-right: mc-css-variable(link-size-caption-icon-margin);
             }
         }
     }
 
     &[disabled] {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
         cursor: default;
         pointer-events: none;
 
         &.mc-text-only,
         &.mc-text-with-icon .mc-link__text {
-            border-bottom-color: map.get($link, border-bottom);
+            border-bottom-color: mc-css-variable(link-border-bottom, map-get($link, border-bottom));
         }
 
         & .mc-icon {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
         /* stylelint-enable no-descending-specificity */
     }
@@ -128,36 +135,35 @@
 
     $link: map.get(map.get($theme, components), link);
 
-    $tokens: map.get($theme, tokens);
-
     .mc-link:not(.mc-link_use-visited) {
         &:visited {
-            color: map.get($link, text);
+            color: mc-css-variable(link-text, map-get($link, text));
         }
 
-        @include mc-link($foreground, $link, $tokens);
+        @include mc-link($foreground, $link);
     }
 
     .mc-link.mc-link_use-visited {
         &:visited {
-            color: map.get($link, state-visited-text);
+            color: mc-css-variable(link-state-visited-text, map-get($link, state-visited-text));
 
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
-                border-bottom-color: map.get($link, state-visited-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    link-state-visited-border-bottom, map-get($link, state-visited-border-bottom));
             }
 
             & .mc-icon {
-                color: map.get($link, state-visited-text);
+                color: mc-css-variable(link-state-visited-text, map-get($link, state-visited-text));
             }
         }
 
-        @include mc-link($foreground, $link, $tokens);
+        @include mc-link($foreground, $link);
     }
 
     @media print {
         .mc-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
 
             &.mc-text-only,
             &.mc-text-with-icon .mc-link__text {
@@ -165,7 +171,7 @@
             }
 
             &::after {
-                color: map.get($foreground, text);
+                color: mc-css-variable(foreground-text, map-get($foreground, text));
 
                 content: ":\a" attr(print);
                 white-space: pre;
@@ -175,13 +181,11 @@
 }
 
 @mixin mc-link-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-link {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-default));
+        @include mc-typography-css-variables(link, default);
     }
 
     .mc-link.mc-link_caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-caption));
+        @include mc-typography-css-variables(link, caption);
     }
 }

package/list/_list-base.scss

@@ -6,6 +6,7 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -18,16 +19,16 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
 
     box-sizing: border-box;
-    height: var(--mc-list-size-item-height, map.get($tokens, list-size-item-height));
+    height: mc-css-variable(list-size-item-height);
 
     border: 2px solid transparent;
 
-    padding-left: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+    padding-left: mc-css-variable(list-size-horizontal-padding);
 
     .mc-list-text {
         @include list.mc-line-wrapper-base();
 
-        padding-right: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+        padding-right: mc-css-variable(list-size-horizontal-padding);
         display: inline-block;
         @include common.mc-truncate-line();
     }

package/list/_list-theme.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-list-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -9,38 +11,36 @@
 
     .mc-list-item,
     .mc-list-option {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
     }
 
     .mc-list-option {
         outline: none;
 
         &:hover {
-            background: map.get($background, overlay-hover);
+            background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
         }
 
         &.mc-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
 
         &.mc-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            background: mc-css-variable(states-selected-color, map-get($theme, states, selected-color));
         }
 
         &.mc-disabled,
         &[disabled] {
             background: transparent;
 
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 }
 
 @mixin mc-list-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-list-item,
     .mc-list-option {
-        @include mc-typography-level-to-styles($config, map.get($tokens, list-font-item));
+        @include mc-typography-css-variables(list, item);
     }
 }

package/list/list.scss

@@ -5,6 +5,7 @@
 @use '../core/styles/common/list';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -31,7 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .mc-pseudo-checkbox,
     & .mc-icon {
-        margin-right: var(--mc-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+        margin-right: mc-css-variable(list-size-icon-right-margin);
     }
 
     & .mc-option-action {

package/loader-overlay/_loader-overlay-theme.scss

@@ -2,32 +2,32 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-loader-overlay-theme($theme) {
-    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
+    $loader-overlay: map-get(map-get($theme, components), loader-overlay);
 
     .mc-loader-overlay {
-        background: map.get($loader-overlay, background);
+        background: mc-css-variable(loader-overlay-background, map-get($loader-overlay, background));
     }
 
     .mc-loader-overlay-text {
-        color: map.get($loader-overlay, text);
+        color: mc-css-variable(loader-overlay-text, map-get($loader-overlay, text));
     }
 
     .mc-loader-overlay-caption {
-        color: map.get($loader-overlay, caption);
+        color: mc-css-variable(loader-overlay-caption, map-get($loader-overlay, caption));
     }
 }
 
 @mixin mc-loader-overlay-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-loader-overlay-text {
-        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+        @include mc-typography-css-variables(loader-overlay, text);
     }
 
     .mc-loader-overlay-caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+        @include mc-typography-css-variables(loader-overlay, caption);
     }
 }
 

package/loader-overlay/loader-overlay.scss

@@ -3,6 +3,7 @@
 
 @use '../core/styles/tokens';
 @use '../core/styles/variables';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -41,34 +42,28 @@ $tokens: meta.module-variables(tokens) !default;
         justify-content: unset;
 
         & .mc-loader-overlay__container {
-            margin-top: var(
-                --mc-loader-overlay-size-fixed-top-padding,
-                map.get($tokens, loader-overlay-size-fixed-top-padding)
-            );
+            margin-top: mc-css-variable(loader-overlay-size-fixed-top-padding);
         }
     }
 
     &.mc-loader-overlay_center:not(.mc-loader-overlay_empty) .mc-loader-overlay__container {
         transform: translateY(
-            var(
-                --mc-loader-overlay-size-center-optical-compensation,
-                map.get($tokens, loader-overlay-size-center-optical-compensation)
-            ));
+            mc-css-variable(loader-overlay-size-center-optical-compensation));
     }
 }
 
 .mc-loader-overlay-text {
-    margin-top: map.get($tokens, size-s);
+    margin-top: mc-css-variable(size-s);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    max-width: mc-css-variable(loader-overlay-size-text-max-width);
 
     text-align: center;
 }
 
 .mc-loader-overlay-caption {
-    margin-top: map.get($tokens, size-3xs);
+    margin-top: mc-css-variable(size-3xs);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    max-width: mc-css-variable(loader-overlay-size-text-max-width);
 
     text-align: center;
 }

package/markdown/_markdown-theme.scss

@@ -2,138 +2,156 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-markdown-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
     $markdown: map.get(map.get($theme, components), markdown);
-    $tokens: map.get($theme, tokens);
 
     .mc-markdown {
-        color: map.get($foreground, text);
-        background: map.get($background, background);;
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
+        background: mc-css-variable(background-background, map-get($background, background));
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {
             .mc-markdown__h#{$i} {
-                color: map.get($markdown, h#{$i}-color);
+                color: mc-css-variable(markdown-h#{$i}-color, map-get($markdown, h#{$i}-color));
             }
         }
 
         .mc-markdown__p {
-            color: map.get($markdown, p-color);
+            color: mc-css-variable(markdown-p-color, map-get($markdown, p-color));
         }
 
         .mc-markdown__ul,
         .mc-markdown__ol {
-            color: map.get($markdown, list-color);
+            color: mc-css-variable(markdown-list-color, map-get($markdown, list-color));
         }
 
         .mc-markdown__blockquote {
-            color: map.get($markdown, blockquote-text);
-            background: map.get($markdown, blockquote-background);
-            border-color: map.get($markdown, blockquote-border);
-            border-left-color: map.get($markdown, blockquote-line);
+            color: mc-css-variable(markdown-blockquote-text, map-get($markdown, blockquote-text));
+            background: mc-css-variable(markdown-blockquote-background, map-get($markdown, blockquote-background));
+            border-color: mc-css-variable(markdown-blockquote-border, map-get($markdown, blockquote-border));
+            border-left-color: mc-css-variable(markdown-blockquote-line, map-get($markdown, blockquote-line));
         }
 
         .mc-markdown__pre,
         .mc-markdown__p > .mc-markdown__code {
-            color: map.get($markdown, code-text);
-            background-color: map.get($markdown, code-background);
-            border-color: map.get($markdown, code-border);
+            color: mc-css-variable(markdown-code-text, map-get($markdown, code-text));
+            background-color: mc-css-variable(markdown-code-background, map-get($markdown, code-background));
+            border-color: mc-css-variable(markdown-code-border, map-get($markdown, code-border));
         }
 
         .mc-markdown__a {
-            color: map.get($markdown, link-text);
-            border-bottom-color: map.get($markdown, link-border-bottom);
+            color: mc-css-variable(markdown-link-text, map-get($markdown, link-text));
+            border-bottom-color: mc-css-variable(markdown-link-border-bottom, map-get($markdown, link-border-bottom));
 
             &:visited {
-                color: map.get($markdown, link-state-visited-text);
-                border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
+                color: mc-css-variable(markdown-link-state-visited-text, map-get($markdown, link-state-visited-text));
+                border-bottom-color: mc-css-variable(
+                    markdown-link-state-visited-border-bottom, map-get($markdown, link-state-visited-border-bottom));
             }
 
             &:hover {
-                color: map.get($markdown, link-state-hover-text);
+                color: mc-css-variable(markdown-link-state-hover-text, map-get($markdown, link-state-hover-text));
                 transition: color 0ms;
-                border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    markdown-link-state-hover-border-bottom, map-get($markdown, link-state-hover-border-bottom));
             }
 
             &:active {
-                color: map.get($markdown, link-state-active-text);
+                color: mc-css-variable(markdown-link-state-active-text, map-get($markdown, link-state-active-text));
             }
 
             &:focus {
                 outline:
-                    map.get($markdown, link-state-focused-outline)
+                    mc-css-variable(markdown-link-state-focused-outline, map-get($markdown, link-state-focused-outline))
                     solid
-                    map.get($tokens, markdown-link-size-state-focused-outline-width);
+                    mc-css-variable(markdown-link-size-state-focused-outline-width);
 
-                outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
+                outline-offset: mc-css-variable(markdown-link-size-state-focused-outline-offset);
             }
         }
 
         .mc-markdown__img + em {
-            color: map.get($markdown, image-caption-text);
+            color: mc-css-variable(markdown-image-caption-text, map-get($markdown, image-caption-text));
         }
 
         .mc-markdown__hr {
-            border-bottom-color: map.get($markdown, hr-color);
+            border-bottom-color: mc-css-variable(markdown-hr-color, map-get($markdown, hr-color));
         }
 
         .mc-markdown__table > .mc-markdown__thead {
-            color: map.get($markdown, table-header);
-            border-bottom-color: map.get($markdown, table-border);
+            color: mc-css-variable(markdown-table-header, map-get($markdown, table-header));
+            border-bottom-color: mc-css-variable(markdown-table-border, map-get($markdown, table-border));
         }
 
         .mc-markdown__table > .mc-markdown__tbody {
-            color: map.get($markdown, table-body);
+            color: mc-css-variable(markdown-table-body, map-get($markdown, table-body));
         }
     }
 }
 
 @mixin mc-markdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-markdown {
-        // h1, h2, h3, h4, h5, h6
-        @for $i from 1 through 6 {
-            .mc-markdown__h#{$i} {
-                @include mc-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
-            }
+        .mc-markdown__h1 {
+            @include mc-typography-css-variables(markdown-h1, default);
+        }
+
+        .mc-markdown__h2 {
+            @include mc-typography-css-variables(markdown-h2, default);
+        }
+
+        .mc-markdown__h3 {
+            @include mc-typography-css-variables(markdown-h3, default);
+        }
+
+        .mc-markdown__h4 {
+            @include mc-typography-css-variables(markdown-h4, default);
+        }
+
+        .mc-markdown__h5 {
+            @include mc-typography-css-variables(markdown-h5, default);
+        }
+
+        .mc-markdown__h6 {
+            @include mc-typography-css-variables(markdown-h6, default);
         }
 
         .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
+            @include mc-typography-css-variables(markdown-p, default);
         }
 
         .mc-markdown__ul,
         .mc-markdown__ol {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
+            @include mc-typography-css-variables(markdown-list, default);
         }
 
         .mc-markdown__blockquote > .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
+            @include mc-typography-css-variables(markdown-blockquote, default);
         }
 
         .mc-markdown__code {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
+            @include mc-typography-css-variables(markdown-code, default);
         }
 
         .mc-markdown__a {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
+            @include mc-typography-css-variables(markdown-link, default);
         }
 
         .mc-markdown__img + em {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
+            @include mc-typography-css-variables(markdown-image, caption);
         }
 
         .mc-markdown__table > .mc-markdown__thead {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
+            @include mc-typography-css-variables(markdown-table, header);
         }
 
         .mc-markdown__table > .mc-markdown__tbody {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
+            @include mc-typography-css-variables(markdown-table, body);
         }
     }
 }