@snack-uikit/modal 0.9.10 → 0.9.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.9.11 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.9.10 (2024-02-09)
7
18
 
8
19
  ### Only dependencies have been changed
@@ -11,7 +11,7 @@
11
11
  width:100%;
12
12
  max-width:calc(100% - var(--space-modal-outside-gap, 24px) * 2);
13
13
  max-height:calc(100vh - var(--space-modal-outside-gap, 24px) * 2);
14
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
14
+ background-color:var(--sys-neutral-background1-level, #fafafc);
15
15
  outline:none;
16
16
  }
17
17
  .modal[data-size=s]{
@@ -33,7 +33,7 @@
33
33
  .headerElements{
34
34
  padding-top:var(--space-modal-header-elements-top, 32px);
35
35
  padding-right:var(--space-modal-header-elements-side, 32px);
36
- gap:var(--dimension-theme-general-16px, 16px);
36
+ gap:var(--space-modal-headline-layout-badge-elements-layout-gap, 16px);
37
37
  position:absolute;
38
38
  top:0;
39
39
  right:0;
@@ -6,7 +6,7 @@
6
6
  flex:1 1 auto;
7
7
  box-sizing:border-box;
8
8
  min-height:var(--dimension-2m, 16px);
9
- color:var(--sys-neutral-text-main, #333333);
9
+ color:var(--sys-neutral-text-main, #33333b);
10
10
  }
11
11
  .modalBody[data-align=center]{
12
12
  text-align:center;
@@ -9,27 +9,27 @@
9
9
  box-sizing:border-box;
10
10
  margin:0;
11
11
  padding:0;
12
- color:var(--sys-neutral-text-support, #565656);
13
- background-color:var(--sys-neutral-decor-default, #dedede);
12
+ color:var(--sys-neutral-text-support, #656771);
13
+ background-color:var(--sys-neutral-decor-default, #dfe2ec);
14
14
  border:0 solid transparent;
15
15
  outline:0;
16
16
  outline-offset:var(--spacing-state-focus-offset, 2px);
17
17
  }
18
18
  .buttonClose:hover, .buttonClose:focus-visible{
19
- color:var(--sys-neutral-text-main, #333333);
20
- background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
19
+ color:var(--sys-neutral-text-main, #33333b);
20
+ background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
21
21
  }
22
22
  .buttonClose:focus-visible{
23
23
  outline-width:var(--border-state-focus-s-border-width, 2px);
24
24
  outline-style:var(--border-state-focus-s-border-style, solid);
25
25
  outline-color:var(--border-state-focus-s-border-color, );
26
- outline-color:var(--sys-available-complementary, #131313);
26
+ outline-color:var(--sys-available-complementary, #141415);
27
27
  }
28
28
  .buttonClose:active{
29
- color:var(--sys-neutral-text-main, #333333);
30
- background-color:var(--sys-neutral-decor-activated, #b8b8b8);
29
+ color:var(--sys-neutral-text-main, #33333b);
30
+ background-color:var(--sys-neutral-decor-activated, #bfc2cc);
31
31
  }
32
32
  .buttonClose svg{
33
- width:var(--dimension-3m, 24px) !important;
34
- height:var(--dimension-3m, 24px) !important;
33
+ width:var(--size-icon-container-s, 24px) !important;
34
+ height:var(--size-icon-container-s, 24px) !important;
35
35
  }
@@ -10,7 +10,7 @@
10
10
  display:flex;
11
11
  flex-direction:column;
12
12
  align-items:flex-end;
13
- color:var(--sys-neutral-text-disabled, #9e9e9e);
13
+ color:var(--sys-neutral-text-disabled, #b3b6bf);
14
14
  }
15
15
 
16
16
  .footer{
@@ -22,12 +22,6 @@
22
22
  display:flex;
23
23
  flex-direction:column;
24
24
  }
25
- .footer[data-align=center]{
26
- align-items:center;
27
- }
28
- .footer[data-align=center] .footerDisclaimer{
29
- align-items:center;
30
- }
31
25
  .footer[data-align=vertical]{
32
26
  align-items:center;
33
27
  }
@@ -36,4 +30,10 @@
36
30
  }
37
31
  .footer[data-align=vertical] .footerDisclaimer{
38
32
  align-items:center;
33
+ }
34
+ .footer[data-align=center]{
35
+ align-items:center;
36
+ }
37
+ .footer[data-align=center] .footerDisclaimer{
38
+ align-items:center;
39
39
  }
@@ -48,5 +48,5 @@
48
48
  }
49
49
 
50
50
  .subtitle{
51
- color:var(--sys-neutral-text-support, #565656);
51
+ color:var(--sys-neutral-text-support, #656771);
52
52
  }
@@ -5,7 +5,7 @@
5
5
  box-sizing:border-box;
6
6
  width:100%;
7
7
  height:100%;
8
- background:var(--sys-blackout, rgba(0, 0, 0, 0.4784313725));
8
+ background:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
9
9
  }
10
10
  .modalOverlay[data-blur]{
11
11
  -webkit-backdrop-filter:blur(var(--background-blur-background-blur, 4px));
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Modal",
7
- "version": "0.9.10",
7
+ "version": "0.9.11",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,13 +32,13 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/button": "0.16.0",
36
- "@snack-uikit/icon-predefined": "0.4.1",
35
+ "@snack-uikit/button": "0.16.1",
36
+ "@snack-uikit/icon-predefined": "0.4.2",
37
37
  "@snack-uikit/icons": "0.20.1",
38
- "@snack-uikit/link": "0.11.1",
38
+ "@snack-uikit/link": "0.11.2",
39
39
  "@snack-uikit/scroll": "0.5.1",
40
- "@snack-uikit/tooltip": "0.11.1",
41
- "@snack-uikit/truncate-string": "0.4.7",
40
+ "@snack-uikit/tooltip": "0.12.0",
41
+ "@snack-uikit/truncate-string": "0.4.8",
42
42
  "@snack-uikit/typography": "0.6.1",
43
43
  "@snack-uikit/utils": "3.2.0",
44
44
  "classnames": "2.3.2",
@@ -47,5 +47,5 @@
47
47
  "devDependencies": {
48
48
  "@types/react-modal": "3.16.0"
49
49
  },
50
- "gitHead": "3da1fb6b1253a73f4e2d7afb5494b64bbfdd6508"
50
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
51
51
  }
@@ -22,21 +22,21 @@
22
22
  display: flex;
23
23
  flex-direction: column;
24
24
 
25
- &[data-align='center'] {
25
+ &[data-align='vertical'] {
26
26
  align-items: center;
27
27
 
28
+ .footerActions {
29
+ width: 100%;
30
+ }
31
+
28
32
  .footerDisclaimer {
29
33
  align-items: center;
30
34
  }
31
35
  }
32
36
 
33
- &[data-align='vertical'] {
37
+ &[data-align='center'] {
34
38
  align-items: center;
35
39
 
36
- .footerActions {
37
- width: 100%;
38
- }
39
-
40
40
  .footerDisclaimer {
41
41
  align-items: center;
42
42
  }