@snack-uikit/modal 0.13.0 → 0.14.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.1 (2024-10-31)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.19.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/scroll@0.9.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
+
+
+
+
+
+# 0.14.0 (2024-10-28)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.13.0 (2024-10-28)
 
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Modal",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,14 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.18.0",
-    "@snack-uikit/icon-predefined": "0.6.0",
-    "@snack-uikit/icons": "0.23.0",
-    "@snack-uikit/link": "0.14.0",
-    "@snack-uikit/scroll": "0.7.0",
-    "@snack-uikit/tooltip": "0.14.0",
-    "@snack-uikit/truncate-string": "0.5.0",
-    "@snack-uikit/typography": "0.7.0",
+    "@snack-uikit/button": "0.19.1",
+    "@snack-uikit/icon-predefined": "0.7.0",
+    "@snack-uikit/icons": "0.24.0",
+    "@snack-uikit/link": "0.15.0",
+    "@snack-uikit/scroll": "0.9.0",
+    "@snack-uikit/tooltip": "0.15.0",
+    "@snack-uikit/truncate-string": "0.6.0",
+    "@snack-uikit/typography": "0.8.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "react-modal": "3.16.1"
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react-modal": "3.16.0"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

package/src/components/ModalCustom/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
 $sizes: 's', 'm', 'l';
 
@@ -15,22 +15,22 @@ $sizes: 's', 'm', 'l';
 
   box-sizing: border-box;
   width: 100%;
-  max-width: calc(100% - ($space-modal-outside-gap * 2));
-  max-height: calc(100vh - ($space-modal-outside-gap * 2));
+  max-width: calc(100% - (styles-tokens-modal.$space-modal-outside-gap * 2));
+  max-height: calc(100vh - (styles-tokens-modal.$space-modal-outside-gap * 2));
 
-  background-color: simple-var($sys-neutral-background1-level);
+  background-color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-background1-level);
   outline: none;
 
   @each $size in $sizes {
     &[data-size="#{$size}"] {
-      @include composite-var($modal, 'window', $size);
+      @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'window', $size);
     }
   }
 }
 
 .headerElements {
-  @include composite-var($modal, 'header-elements', 'container');
-  @include composite-var($modal, 'header-elements', 'elements-layout');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'header-elements', 'container');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'header-elements', 'elements-layout');
 
   position: absolute;
   top: 0;

package/src/helperComponents/Body/styles.module.scss

@@ -1,12 +1,12 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
 .modalBody {
-  @include composite-var($modal-body);
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal-body);
 
   flex: 1 1 auto;
   box-sizing: border-box;
-  min-height: $dimension-2m;
-  color: $sys-neutral-text-main;
+  min-height: styles-tokens-modal.$dimension-2m;
+  color: styles-tokens-modal.$sys-neutral-text-main;
 
   &[data-align='center'] {
     text-align: center;

package/src/helperComponents/ButtonClose/styles.module.scss

@@ -1,8 +1,8 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .buttonClose {
-  @include composite-var($modal-button-close);
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal-button-close);
 
   cursor: pointer;
 
@@ -14,31 +14,31 @@
   margin: 0;
   padding: 0;
 
-  color: simple-var($sys-neutral-text-support);
+  color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-text-support);
 
-  background-color: simple-var($sys-neutral-decor-default);
+  background-color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-decor-default);
   border: 0 solid transparent;
   outline: 0;
-  outline-offset: $spacing-state-focus-offset;
+  outline-offset: styles-tokens-modal.$spacing-state-focus-offset;
 
   &:hover, &:focus-visible {
-    color: simple-var($sys-neutral-text-main);
-    background-color: simple-var($sys-neutral-decor-hovered);
+    color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-text-main);
+    background-color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-decor-hovered);
   }
 
   &:focus-visible {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-modal.outline-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: $sys-available-complementary;
+    outline-color: styles-tokens-modal.$sys-available-complementary;
   }
 
   &:active {
-    color: simple-var($sys-neutral-text-main);
-    background-color: simple-var($sys-neutral-decor-activated);
+    color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-text-main);
+    background-color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-decor-activated);
   }
 
   svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
   }
 }

package/src/helperComponents/Footer/styles.module.scss

@@ -1,7 +1,7 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
 .footerActions {
-  @include composite-var($modal, 'action-row');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'action-row');
 
   display: flex;
   flex-direction: row-reverse;
@@ -13,11 +13,11 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  color: simple-var($sys-neutral-text-disabled);
+  color: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-text-disabled);
 }
 
 .footer {
-  @include composite-var($modal, 'footer');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'footer');
 
   display: flex;
   flex-direction: column;

package/src/helperComponents/Header/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
 $aligns: 'default', 'center';
 
@@ -7,7 +7,7 @@ $aligns: 'default', 'center';
 }
 
 .image {
-  @include composite-var($modal, 'image');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'image');
 
   display: block;
   width: 100%;
@@ -15,7 +15,7 @@ $aligns: 'default', 'center';
 }
 
 .icon {
-  @include composite-var($modal, 'icon-decor');
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'icon-decor');
 
   display: flex;
   justify-content: center;
@@ -24,7 +24,7 @@ $aligns: 'default', 'center';
 .headlineLayout {
   @each $align in $aligns {
     &[data-align="#{$align}"] {
-      @include composite-var($modal, 'headline-layout', $align);
+      @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'headline-layout', $align);
 
       display: flex;
       flex-direction: column;
@@ -41,7 +41,7 @@ $aligns: 'default', 'center';
 }
 
 .headline {
-  @include composite-var($modal-headline);
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal-headline);
 
   display: flex;
   align-items: center;
@@ -52,5 +52,5 @@ $aligns: 'default', 'center';
 }
 
 .subtitle {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-modal.$sys-neutral-text-support;
 }

package/src/helperComponents/OverlayElement/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
 .modalOverlay {
   position: fixed;
@@ -9,9 +9,9 @@
   width: 100%;
   height: 100%;
 
-  background: simple-var($sys-blackout);
+  background: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-blackout);
 
   &[data-blur] {
-    backdrop-filter: blur(simple-var($background-blur-background-blur));
+    backdrop-filter: blur(styles-tokens-modal.simple-var(styles-tokens-modal.$background-blur-background-blur));
   }
 }