@semcore/modal 3.1.13 → 3.2.1

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/lib/cjs/Modal.js +6 -6
  3. package/lib/cjs/style/modal.shadow.css +13 -15
  4. package/lib/es6/Modal.js +6 -6
  5. package/lib/es6/style/modal.shadow.css +13 -15
  6. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -2,11 +2,17 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [3.1.13] - 2022-12-09
5
+ ## [3.2.1] - 2022-12-13
6
6
 
7
7
  ### Changed
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/animation` [1.8.0 ~> 1.8.1]).
9
+ - Added `react-dom` to peer dependencies.
10
+
11
+ ## [3.2.0] - 2022-12-12
12
+
13
+ ### Added
14
+
15
+ - Design tokens based theming.
10
16
 
11
17
  ## [3.1.8] - 2022-11-08
12
18
 
package/lib/cjs/Modal.js CHANGED
@@ -70,15 +70,15 @@ var style = (
70
70
  /*__reshadow_css_start__*/
71
71
  _core.sstyled.insert(
72
72
  /*__inner_css_start__*/
73
- ".___SWindow_1r45e_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_1r45e_gg_:focus{outline:none}.___SOverlay_1r45e_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_1r45e_gg_ .___SOverlay_1r45e_gg_{background:rgba(25,27,35,.4)}.___SClose_1r45e_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1r45e_gg_:hover{color:#8a8e9b}.___SClose_1r45e_gg_.__keyboardFocused_1r45e_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}@media (max-width:767px){.___SWindow_1r45e_gg_{min-width:60%}.___SOverlay_1r45e_gg_{padding:12px}}"
73
+ ".___SWindow_1lydh_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_1lydh_gg_:focus{outline:none}.___SOverlay_1lydh_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_1lydh_gg_ .___SOverlay_1lydh_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1lydh_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1lydh_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1lydh_gg_.__keyboardFocused_1lydh_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1lydh_gg_{min-width:60%}.___SOverlay_1lydh_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
74
74
  /*__inner_css_end__*/
75
- , "1r45e_gg_")
75
+ , "1lydh_gg_")
76
76
  /*__reshadow_css_end__*/
77
77
  , {
78
- "__SWindow": "___SWindow_1r45e_gg_",
79
- "__SOverlay": "___SOverlay_1r45e_gg_",
80
- "__SClose": "___SClose_1r45e_gg_",
81
- "_keyboardFocused": "__keyboardFocused_1r45e_gg_"
78
+ "__SWindow": "___SWindow_1lydh_gg_",
79
+ "__SOverlay": "___SOverlay_1lydh_gg_",
80
+ "__SClose": "___SClose_1lydh_gg_",
81
+ "_keyboardFocused": "__keyboardFocused_1lydh_gg_"
82
82
  });
83
83
 
84
84
  var ModalRoot = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/modal.shadow.css CHANGED
@@ -1,13 +1,11 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SWindow {
4
2
  position: relative;
5
- border-radius: var(--rounded-l);
6
- background: var(--white);
3
+ border-radius: var(--intergalactic-rounded-large, 12px);
4
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
7
5
  box-sizing: border-box;
8
6
  margin: auto;
9
- padding: 40px;
10
- box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
7
+ padding: var(--intergalactic-spacing-10x, 40px);
8
+ box-shadow: var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));
11
9
 
12
10
  &:focus {
13
11
  outline: none;
@@ -24,14 +22,14 @@ SOverlay {
24
22
  display: flex;
25
23
  justify-content: center;
26
24
  align-items: center;
27
- padding: 40px;
28
- background: color-mod(var(--gray-800) a(70%));
25
+ padding: var(--intergalactic-spacing-10x, 40px);
26
+ background: var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));
29
27
  overflow: auto;
30
- z-index: 10005;
28
+ z-index: var(--intergalactic-z-index-modal, 600);
31
29
  -webkit-overflow-scrolling: touch;
32
30
 
33
31
  & SOverlay {
34
- background: color-mod(var(--gray-800) a(40%));
32
+ background: var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4));
35
33
  }
36
34
  }
37
35
 
@@ -40,8 +38,8 @@ SClose {
40
38
  position: absolute;
41
39
  right: 0;
42
40
  top: 0;
43
- padding: 12px;
44
- color: var(--gray-300);
41
+ padding: var(--intergalactic-spacing-3x, 12px);
42
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
45
43
  cursor: pointer;
46
44
  z-index: 1;
47
45
  border: none;
@@ -49,12 +47,12 @@ SClose {
49
47
  outline: none;
50
48
 
51
49
  &:hover {
52
- color: var(--gray-400);
50
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
53
51
  }
54
52
  }
55
53
 
56
54
  SClose[keyboardFocused] {
57
- box-shadow: var(--keyboard-focus);
55
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
58
56
  }
59
57
 
60
58
  @media (max-width: 767px) {
@@ -63,6 +61,6 @@ SClose[keyboardFocused] {
63
61
  }
64
62
 
65
63
  SOverlay {
66
- padding: 12px;
64
+ padding: var(--intergalactic-spacing-3x, 12px);
67
65
  }
68
66
  }
package/lib/es6/Modal.js CHANGED
@@ -40,15 +40,15 @@ var style = (
40
40
  /*__reshadow_css_start__*/
41
41
  _sstyled.insert(
42
42
  /*__inner_css_start__*/
43
- ".___SWindow_1r45e_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_1r45e_gg_:focus{outline:none}.___SOverlay_1r45e_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_1r45e_gg_ .___SOverlay_1r45e_gg_{background:rgba(25,27,35,.4)}.___SClose_1r45e_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1r45e_gg_:hover{color:#8a8e9b}.___SClose_1r45e_gg_.__keyboardFocused_1r45e_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}@media (max-width:767px){.___SWindow_1r45e_gg_{min-width:60%}.___SOverlay_1r45e_gg_{padding:12px}}"
43
+ ".___SWindow_1lydh_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_1lydh_gg_:focus{outline:none}.___SOverlay_1lydh_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_1lydh_gg_ .___SOverlay_1lydh_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1lydh_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1lydh_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1lydh_gg_.__keyboardFocused_1lydh_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1lydh_gg_{min-width:60%}.___SOverlay_1lydh_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
44
44
  /*__inner_css_end__*/
45
- , "1r45e_gg_")
45
+ , "1lydh_gg_")
46
46
  /*__reshadow_css_end__*/
47
47
  , {
48
- "__SWindow": "___SWindow_1r45e_gg_",
49
- "__SOverlay": "___SOverlay_1r45e_gg_",
50
- "__SClose": "___SClose_1r45e_gg_",
51
- "_keyboardFocused": "__keyboardFocused_1r45e_gg_"
48
+ "__SWindow": "___SWindow_1lydh_gg_",
49
+ "__SOverlay": "___SOverlay_1lydh_gg_",
50
+ "__SClose": "___SClose_1lydh_gg_",
51
+ "_keyboardFocused": "__keyboardFocused_1lydh_gg_"
52
52
  });
53
53
 
54
54
  var ModalRoot = /*#__PURE__*/function (_Component) {
package/lib/es6/style/modal.shadow.css CHANGED
@@ -1,13 +1,11 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SWindow {
4
2
  position: relative;
5
- border-radius: var(--rounded-l);
6
- background: var(--white);
3
+ border-radius: var(--intergalactic-rounded-large, 12px);
4
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
7
5
  box-sizing: border-box;
8
6
  margin: auto;
9
- padding: 40px;
10
- box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
7
+ padding: var(--intergalactic-spacing-10x, 40px);
8
+ box-shadow: var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));
11
9
 
12
10
  &:focus {
13
11
  outline: none;
@@ -24,14 +22,14 @@ SOverlay {
24
22
  display: flex;
25
23
  justify-content: center;
26
24
  align-items: center;
27
- padding: 40px;
28
- background: color-mod(var(--gray-800) a(70%));
25
+ padding: var(--intergalactic-spacing-10x, 40px);
26
+ background: var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));
29
27
  overflow: auto;
30
- z-index: 10005;
28
+ z-index: var(--intergalactic-z-index-modal, 600);
31
29
  -webkit-overflow-scrolling: touch;
32
30
 
33
31
  & SOverlay {
34
- background: color-mod(var(--gray-800) a(40%));
32
+ background: var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4));
35
33
  }
36
34
  }
37
35
 
@@ -40,8 +38,8 @@ SClose {
40
38
  position: absolute;
41
39
  right: 0;
42
40
  top: 0;
43
- padding: 12px;
44
- color: var(--gray-300);
41
+ padding: var(--intergalactic-spacing-3x, 12px);
42
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
45
43
  cursor: pointer;
46
44
  z-index: 1;
47
45
  border: none;
@@ -49,12 +47,12 @@ SClose {
49
47
  outline: none;
50
48
 
51
49
  &:hover {
52
- color: var(--gray-400);
50
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
53
51
  }
54
52
  }
55
53
 
56
54
  SClose[keyboardFocused] {
57
- box-shadow: var(--keyboard-focus);
55
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
58
56
  }
59
57
 
60
58
  @media (max-width: 767px) {
@@ -63,6 +61,6 @@ SClose[keyboardFocused] {
63
61
  }
64
62
 
65
63
  SOverlay {
66
- padding: 12px;
64
+ padding: var(--intergalactic-spacing-3x, 12px);
67
65
  }
68
66
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/modal",
3
3
  "description": "Semrush Modal Component",
4
- "version": "3.1.13",
4
+ "version": "3.2.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -19,7 +19,8 @@
19
19
  },
20
20
  "peerDependencies": {
21
21
  "@semcore/core": "^1.11",
22
- "react": "16.8 - 18"
22
+ "react": "16.8 - 18",
23
+ "react-dom": "16.8 - 18"
23
24
  },
24
25
  "jest": {
25
26
  "preset": "@semcore/jest-preset-ui"