@ptsecurity/mosaic 17.0.0 → 17.2.0

package/navbar/navbar-item.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -23,8 +24,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    padding-left: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
-    padding-right: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+    padding-left: mc-css-variable(navbar-item-size-padding);
+    padding-right: mc-css-variable(navbar-item-size-padding);
 
     .mc-badge {
         position: absolute;
@@ -56,7 +57,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-navbar-item.mc-horizontal {
-    height: var(--mc-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+    height: mc-css-variable(navbar-item-size-height);
 
     & .mc-icon {
         min-width: 16px;
@@ -64,11 +65,11 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .mc-navbar-item__title + .mc-icon {
-        margin-left: var(--mc-navbar-size-right-icon-margin, map.get($tokens, navbar-size-right-icon-margin))
+        margin-left: mc-css-variable(navbar-size-right-icon-margin)
     }
 
     & .mc-icon + .mc-navbar-item__container {
-        margin-left: var(--mc-navbar-size-icon-margin, map.get($tokens, navbar-size-icon-margin))
+        margin-left: mc-css-variable(navbar-size-icon-margin)
     }
 
     &.mc-navbar-item_collapsed .mc-navbar-item__container {
@@ -87,7 +88,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-navbar-item.mc-vertical {
-    height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+    height: mc-css-variable(navbar-item-size-height-vertical);
 
     /* stylelint-disable no-descending-specificity */
     & > .mc-icon {
@@ -102,7 +103,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .mc-navbar-item__title,
     & .mc-icon + .mc-navbar-item__title,
     & .mc-navbar-item__title + .mc-icon {
-        padding-left: var(--mc-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
+        padding-left: mc-css-variable(vertical-navbar-size-icon-margin);
     }
 
     &.mc-navbar-item_has-nested {

package/navbar/vertical-navbar.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -9,10 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-vertical-navbar {
     position: relative;
 
-    min-width: var(
-        --mc-vertical-navbar-size-states-collapsed-width,
-        map.get($tokens, vertical-navbar-size-states-collapsed-width)
-    );
+    min-width: mc-css-variable(vertical-navbar-size-states-collapsed-width);
     height: 100%;
 
     & .mc-navbar-container {
@@ -30,17 +28,11 @@ $tokens: meta.module-variables(tokens) !default;
         height: 100%;
 
         &.mc-collapsed {
-            width: var(
-                --mc-vertical-navbar-size-states-collapsed-width,
-                map.get($tokens, vertical-navbar-size-states-collapsed-width)
-            );
+            width: mc-css-variable(vertical-navbar-size-states-collapsed-width);
         }
 
         &.mc-expanded {
-            width: var(
-                --mc-vertical-navbar-size-states-expanded-width,
-                map.get($tokens, vertical-navbar-size-states-expanded-width)
-            );
+            width: mc-css-variable(vertical-navbar-size-states-expanded-width);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "17.0.0",
+    "version": "17.2.0",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -19,14 +19,14 @@
     "peerDependencies": {
         "@angular/cdk": "^17.2.0",
         "@angular/forms": "^17.2.0",
-        "@ptsecurity/cdk": "^17.0.0",
-        "@ptsecurity/mosaic-moment-adapter": "^17.0.0",
-        "@ptsecurity/mosaic-luxon-adapter": "^17.0.0",
+        "@ptsecurity/cdk": "^17.2.0",
+        "@ptsecurity/mosaic-moment-adapter": "^17.2.0",
+        "@ptsecurity/mosaic-luxon-adapter": "^17.2.0",
         "@mosaic-design/date-formatter": "^2.1.5",
         "@ptsecurity/mosaic-icons": "^7.0.8",
-        "@mosaic-design/tokens-builder": "^2.1.4",
-        "@mosaic-design/tokens-fe-2022": "^2.1.4",
-        "@mosaic-design/tokens-legacy-2017": "^2.1.4",
+        "@mosaic-design/tokens-builder": "^3.0.0",
+        "@mosaic-design/tokens-fe-2022": "^3.0.0",
+        "@mosaic-design/tokens-legacy-2017": "^3.0.0",
         "marked": "^4.0.18"
     },
     "dependencies": {
@@ -147,18 +147,18 @@
             "esm": "./esm2022/icon/ptsecurity-mosaic-icon.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-icon.mjs"
         },
-        "./link": {
-            "types": "./link/index.d.ts",
-            "esm2022": "./esm2022/link/ptsecurity-mosaic-link.mjs",
-            "esm": "./esm2022/link/ptsecurity-mosaic-link.mjs",
-            "default": "./fesm2022/ptsecurity-mosaic-link.mjs"
-        },
         "./input": {
             "types": "./input/index.d.ts",
             "esm2022": "./esm2022/input/ptsecurity-mosaic-input.mjs",
             "esm": "./esm2022/input/ptsecurity-mosaic-input.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-input.mjs"
         },
+        "./link": {
+            "types": "./link/index.d.ts",
+            "esm2022": "./esm2022/link/ptsecurity-mosaic-link.mjs",
+            "esm": "./esm2022/link/ptsecurity-mosaic-link.mjs",
+            "default": "./fesm2022/ptsecurity-mosaic-link.mjs"
+        },
         "./list": {
             "types": "./list/index.d.ts",
             "esm2022": "./esm2022/list/ptsecurity-mosaic-list.mjs",
@@ -177,6 +177,12 @@
             "esm": "./esm2022/markdown/ptsecurity-mosaic-markdown.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-markdown.mjs"
         },
+        "./modal": {
+            "types": "./modal/index.d.ts",
+            "esm2022": "./esm2022/modal/ptsecurity-mosaic-modal.mjs",
+            "esm": "./esm2022/modal/ptsecurity-mosaic-modal.mjs",
+            "default": "./fesm2022/ptsecurity-mosaic-modal.mjs"
+        },
         "./navbar": {
             "types": "./navbar/index.d.ts",
             "esm2022": "./esm2022/navbar/ptsecurity-mosaic-navbar.mjs",
@@ -189,12 +195,6 @@
             "esm": "./esm2022/popover/ptsecurity-mosaic-popover.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-popover.mjs"
         },
-        "./modal": {
-            "types": "./modal/index.d.ts",
-            "esm2022": "./esm2022/modal/ptsecurity-mosaic-modal.mjs",
-            "esm": "./esm2022/modal/ptsecurity-mosaic-modal.mjs",
-            "default": "./fesm2022/ptsecurity-mosaic-modal.mjs"
-        },
         "./progress-bar": {
             "types": "./progress-bar/index.d.ts",
             "esm2022": "./esm2022/progress-bar/ptsecurity-mosaic-progress-bar.mjs",
@@ -213,18 +213,18 @@
             "esm": "./esm2022/radio/ptsecurity-mosaic-radio.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-radio.mjs"
         },
-        "./sidebar": {
-            "types": "./sidebar/index.d.ts",
-            "esm2022": "./esm2022/sidebar/ptsecurity-mosaic-sidebar.mjs",
-            "esm": "./esm2022/sidebar/ptsecurity-mosaic-sidebar.mjs",
-            "default": "./fesm2022/ptsecurity-mosaic-sidebar.mjs"
-        },
         "./select": {
             "types": "./select/index.d.ts",
             "esm2022": "./esm2022/select/ptsecurity-mosaic-select.mjs",
             "esm": "./esm2022/select/ptsecurity-mosaic-select.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-select.mjs"
         },
+        "./sidebar": {
+            "types": "./sidebar/index.d.ts",
+            "esm2022": "./esm2022/sidebar/ptsecurity-mosaic-sidebar.mjs",
+            "esm": "./esm2022/sidebar/ptsecurity-mosaic-sidebar.mjs",
+            "default": "./fesm2022/ptsecurity-mosaic-sidebar.mjs"
+        },
         "./sidepanel": {
             "types": "./sidepanel/index.d.ts",
             "esm2022": "./esm2022/sidepanel/ptsecurity-mosaic-sidepanel.mjs",

package/popover/_popover-theme.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-popover-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -11,73 +13,73 @@
     $footer: map.get($popover, footer);
 
     .mc-popover {
-        border-color: map.get($popover, border);
+        border-color: mc-css-variable(popover-border, map-get($popover, border));
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     }
 
     .mc-popover__header {
-        color: map.get($header, text);
-        background: map.get($header, background);
-        border-bottom-color: map.get($header, border);
+        color: mc-css-variable(popover-header-text, map-get($header, text));
+        background: mc-css-variable(popover-header-background, map-get($header, background));
+        border-bottom-color: mc-css-variable(popover-header-border, map-get($header, border));
     }
 
     .mc-popover__container,
     .mc-popover__content {
-        color: map.get($popover, text);
-        background-color: map.get($popover, background);
+        color: mc-css-variable(popover-text, map-get($popover, text));
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover__footer {
-        border-top-color: map.get($footer, border);
-        background-color: map.get($footer, background);
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
     }
 
     .mc-popover .mc-popover__arrow {
-        border-color: map.get($popover, border);
+        border-color: mc-css-variable(popover-border, map-get($popover, border));
     }
 
     .mc-popover_placement-top .mc-popover__arrow,
     .mc-popover_placement-top-left .mc-popover__arrow,
     .mc-popover_placement-top-right .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, border);
-        border-left-color: map.get($popover, border);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-top-color: mc-css-variable(popover-border, map-get($popover, border));
+        border-left-color: mc-css-variable(popover-border, map-get($popover, border));
     }
 
     .mc-popover_placement-top .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-left-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-right .mc-popover__arrow,
     .mc-popover_placement-right-top .mc-popover__arrow,
     .mc-popover_placement-right-bottom .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-top-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-right-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover_placement-right-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-right-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-right-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-left .mc-popover__arrow,
     .mc-popover_placement-left-top .mc-popover__arrow,
     .mc-popover_placement-left-bottom .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
-        border-left-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-bottom-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-left-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover_placement-left-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-bottom-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-bottom-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-left-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-bottom .mc-popover__arrow,
@@ -86,24 +88,22 @@
     .mc-popover_placement-bottom .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-right-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-bottom-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 }
 
 @mixin mc-popover-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-popover__header {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+        @include mc-typography-css-variables(popover-header, default);
     }
 
     .mc-popover__content {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-font-default));
+        @include mc-typography-css-variables(popover, default);
     }
 
     .mc-popover__footer {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+        @include mc-typography-css-variables(popover-footer, default);
     }
 }

package/popover/popover.scss

@@ -5,6 +5,7 @@
 @use '../core/pop-up/pop-up';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -12,8 +13,8 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover {
     position: relative;
 
-    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
-    border-width: var(--mc-popover-size-border-width, map.get($tokens, popover-size-border-width));
+    border-radius: mc-css-variable(popover-size-border-radius);
+    border-width: mc-css-variable(popover-size-border-width);
     border-style: solid;
 
     box-sizing: border-box;
@@ -24,15 +25,15 @@ $tokens: meta.module-variables(tokens) !default;
     white-space: pre-line;
 
     &.mc-popover_small {
-        max-width: var(--mc-popover-size-small-width, map.get($tokens, popover-size-small-width));
+        max-width: mc-css-variable(popover-size-small-width);
     }
 
     &.mc-popover_medium {
-        max-width: var(--mc-popover-size-medium-width, map.get($tokens, popover-size-medium-width));
+        max-width: mc-css-variable(popover-size-medium-width);
     }
 
     &.mc-popover_large {
-        max-width: var(--mc-popover-size-large-width, map.get($tokens, popover-size-large-width));
+        max-width: mc-css-variable(popover-size-large-width);
     }
 
     $popover-distance: calc(var(--mc-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
@@ -44,8 +45,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: column;
 
-    max-height: var(--mc-popover-size-max-height, map.get($tokens, popover-size-max-height));
-    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
+    max-height: mc-css-variable(popover-size-max-height);
+    border-radius: mc-css-variable(popover-size-border-radius);
     overflow: hidden;
 }
 
@@ -53,9 +54,9 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    height: var(--mc-popover-header-size-height, map.get($tokens, popover-header-size-height));
+    height: mc-css-variable(popover-header-size-height);
 
-    padding: var(--mc-popover-header-size-padding, map.get($tokens, popover-header-size-padding));
+    padding: mc-css-variable(popover-header-size-padding);
 
     border-bottom-width: 1px;
     border-bottom-style: solid;
@@ -64,7 +65,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover__content {
     overflow: hidden;
 
-    padding: var(--mc-popover-size-padding, map.get($tokens, popover-size-padding));
+    padding: mc-css-variable(popover-size-padding);
 
     &.mc-popover__content_padding_bottom {
         padding-bottom: calc(
@@ -77,9 +78,9 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover__footer {
     box-sizing: border-box;
 
-    height: var(--mc-popover-footer-size-height, map.get($tokens, popover-footer-size-height));
+    height: mc-css-variable(popover-footer-size-height);
 
-    padding: var(--mc-popover-footer-size-padding, map.get($tokens, popover-footer-size-padding));
+    padding: mc-css-variable(popover-footer-size-padding);
 
     border-top-width: 1px;
     border-top-style: solid;
@@ -90,8 +91,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     z-index: -1;
 
-    width: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
-    height: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
+    width: mc-css-variable(popover-size-arrow-size);
+    height: mc-css-variable(popover-size-arrow-size);
 
     border: solid 1px;