@semcore/fullscreen-modal 2.1.10 → 2.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/FullscreenModal.js +13 -13
  3. package/lib/cjs/style/fullscreen-modal.shadow.css +35 -35
  4. package/lib/es6/FullscreenModal.js +13 -13
  5. package/lib/es6/style/fullscreen-modal.shadow.css +35 -35
  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
- ## [2.1.10] - 2022-11-30
5
+ ## [2.2.1] - 2022-12-13
6
6
 
7
7
  ### Changed
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/utils` [3.41.0 ~> 3.42.0], `@semcore/flex-box` [4.6.4 ~> 4.6.5]).
9
+ - Added `react-dom` to peer dependencies.
10
+
11
+ ## [2.2.0] - 2022-12-12
12
+
13
+ ### Added
14
+
15
+ - Design tokens based theming.
10
16
 
11
17
  ## [2.1.7] - 2022-11-08
12
18
 
package/lib/cjs/FullscreenModal.js CHANGED
@@ -56,22 +56,22 @@ var style = (
56
56
  /*__reshadow_css_start__*/
57
57
  _core.sstyled.insert(
58
58
  /*__inner_css_start__*/
59
- ".___SFullscreenOverlay_1shks_gg_{padding:0}.___SFullscreenModal_1shks_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_1shks_gg_,.___SClose_1shks_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1shks_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_1shks_gg_:hover{color:#8a8e9b}.___SBack_1shks_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_1shks_gg_:hover{color:#484a54}.___SBackText_1shks_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1shks_gg_,.___STitle_1shks_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1shks_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_1shks_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_1shks_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_1shks_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_1shks_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_1shks_gg_{display:flex;height:100%;overflow:auto}.___SSection_1shks_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1shks_gg_{transition:none}}"
59
+ ".___SFullscreenOverlay_1n1eq_gg_{padding:0}.___SFullscreenModal_1n1eq_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral,#fff);border-radius:0;padding:0}.___SBack_1n1eq_gg_,.___SClose_1n1eq_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1n1eq_gg_{top:17px;right:23px;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SClose_1n1eq_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SBack_1n1eq_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-primary-neutral,#6c6e79);font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%)}.___SBack_1n1eq_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active,#484a54)}.___SBackText_1n1eq_gg_{margin-left:var(--intergalactic-spacing-1x,4px);font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1n1eq_gg_,.___STitle_1n1eq_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1n1eq_gg_{font-size:var(--intergalactic-fs-500,24px);line-height:var(--intergalactic-lh-500,117%);font-weight:var(--intergalactic-bold,700);font-family:FactorA-Bold,sans-serif;color:var(--intergalactic-text-primary,#191b23)}.___SDescription_1n1eq_gg_{display:flex;align-items:baseline;font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%);color:var(--intergalactic-text-secondary,#6c6e79)}.___SDescription_1n1eq_gg_:before{content:\"\";position:relative;top:var(--intergalactic-spacing-1x,4px);display:block;margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px);height:24px;width:1px;background-color:var(--intergalactic-border-primary,#c4c7cf)}.___SHeader_1n1eq_gg_{display:flex;align-items:baseline;padding-left:var(--intergalactic-spacing-8x,32px);padding-bottom:var(--intergalactic-spacing-2x,8px);padding-right:calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));padding-top:var(--intergalactic-spacing-10x,40px);min-height:76px;box-shadow:inset 0 -1px 0 var(--intergalactic-border-primary,#c4c7cf);box-sizing:border-box}.___SFooter_1n1eq_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary,#c4c7cf);box-sizing:border-box}.___SBody_1n1eq_gg_{display:flex;height:100%;overflow:auto}.___SSection_1n1eq_gg_{padding-top:var(--intergalactic-spacing-6x,24px);padding-bottom:var(--intergalactic-spacing-6x,24px);padding-left:var(--intergalactic-spacing-8x,32px);padding-right:var(--intergalactic-spacing-8x,32px);flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1n1eq_gg_{transition:none}}"
60
60
  /*__inner_css_end__*/
61
- , "1shks_gg_")
61
+ , "1n1eq_gg_")
62
62
  /*__reshadow_css_end__*/
63
63
  , {
64
- "__SFullscreenOverlay": "___SFullscreenOverlay_1shks_gg_",
65
- "__SFullscreenModal": "___SFullscreenModal_1shks_gg_",
66
- "__SBack": "___SBack_1shks_gg_",
67
- "__SClose": "___SClose_1shks_gg_",
68
- "__SBackText": "___SBackText_1shks_gg_",
69
- "__SDescription": "___SDescription_1shks_gg_",
70
- "__STitle": "___STitle_1shks_gg_",
71
- "__SHeader": "___SHeader_1shks_gg_",
72
- "__SFooter": "___SFooter_1shks_gg_",
73
- "__SBody": "___SBody_1shks_gg_",
74
- "__SSection": "___SSection_1shks_gg_"
64
+ "__SFullscreenOverlay": "___SFullscreenOverlay_1n1eq_gg_",
65
+ "__SFullscreenModal": "___SFullscreenModal_1n1eq_gg_",
66
+ "__SBack": "___SBack_1n1eq_gg_",
67
+ "__SClose": "___SClose_1n1eq_gg_",
68
+ "__SBackText": "___SBackText_1n1eq_gg_",
69
+ "__SDescription": "___SDescription_1n1eq_gg_",
70
+ "__STitle": "___STitle_1n1eq_gg_",
71
+ "__SHeader": "___SHeader_1n1eq_gg_",
72
+ "__SFooter": "___SFooter_1n1eq_gg_",
73
+ "__SBody": "___SBody_1n1eq_gg_",
74
+ "__SSection": "___SSection_1n1eq_gg_"
75
75
  });
76
76
 
77
77
  var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/fullscreen-modal.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SFullscreenOverlay {
4
2
  padding: 0;
5
3
  }
@@ -9,7 +7,7 @@ SFullscreenModal {
9
7
  display: flex;
10
8
  flex-direction: column;
11
9
  width: 100%;
12
- background: var(--white);
10
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
13
11
  border-radius: 0;
14
12
  padding: 0;
15
13
  }
@@ -24,11 +22,11 @@ SBack {
24
22
  SClose {
25
23
  top: 17px;
26
24
  right: 23px;
27
- padding: 12px;
28
- color: var(--gray-300);
25
+ padding: var(--intergalactic-spacing-3x, 12px);
26
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
29
27
 
30
28
  &:hover {
31
- color: var(--gray-400);
29
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
32
30
  }
33
31
  }
34
32
 
@@ -37,20 +35,20 @@ SBack {
37
35
  left: 32px;
38
36
  display: flex;
39
37
  align-items: center;
40
- margin-bottom: 12px;
41
- color: var(--gray-500);
42
- font-size: var(--fs-100);
43
- line-height: var(--lh-100);
38
+ margin-bottom: var(--intergalactic-spacing-3x, 12px);
39
+ color: var(--intergalactic-icon-primary-neutral, #6c6e79);
40
+ font-size: var(--intergalactic-fs-100, 12px);
41
+ line-height: var(--intergalactic-lh-100, 133%);
44
42
 
45
43
  &:hover {
46
- color: var(--gray-600);
44
+ color: var(--intergalactic-icon-primary-neutral-hover-active, #484a54);
47
45
  }
48
46
  }
49
47
 
50
48
  SBackText {
51
- margin-left: 4px;
52
- font-size: var(--fs-200);
53
- line-height: var(--lh-200);
49
+ margin-left: var(--intergalactic-spacing-1x, 4px);
50
+ font-size: var(--intergalactic-fs-200, 14px);
51
+ line-height: var(--intergalactic-lh-200, 142%);
54
52
  white-space: nowrap;
55
53
  overflow: hidden;
56
54
  text-overflow: ellipsis;
@@ -63,48 +61,50 @@ SDescription {
63
61
  }
64
62
 
65
63
  STitle {
66
- font-size: var(--fs-500);
67
- line-height: var(--lh-500);
68
- font-weight: 700;
64
+ font-size: var(--intergalactic-fs-500, 24px);
65
+ line-height: var(--intergalactic-lh-500, 117%);
66
+ font-weight: var(--intergalactic-bold, 700);
69
67
  font-family: FactorA-Bold, sans-serif;
70
- color: var(--gray-800);
68
+ color: var(--intergalactic-text-primary, #191b23);
71
69
  }
72
70
 
73
71
  SDescription {
74
72
  display: flex;
75
73
  align-items: baseline;
76
- font-size: var(--fs-100);
77
- line-height: var(--lh-100);
78
- color: var(--gray-500);
74
+ font-size: var(--intergalactic-fs-100, 12px);
75
+ line-height: var(--intergalactic-lh-100, 133%);
76
+ color: var(--intergalactic-text-secondary, #6c6e79);
79
77
 
80
78
  &::before {
81
79
  content: '';
82
80
  position: relative;
83
- top: 4px;
81
+ top: var(--intergalactic-spacing-1x, 4px);
84
82
  display: block;
85
- margin-left: 12px;
86
- margin-right: 12px;
83
+ margin-left: var(--intergalactic-spacing-3x, 12px);
84
+ margin-right: var(--intergalactic-spacing-3x, 12px);
87
85
  height: 24px;
88
86
  width: 1px;
89
- background-color: var(--gray-200);
87
+ background-color: var(--intergalactic-border-primary, #c4c7cf);
90
88
  }
91
89
  }
92
90
 
93
91
  SHeader {
94
92
  display: flex;
95
93
  align-items: baseline;
96
- padding-left: 32px;
97
- padding-bottom: 8px;
98
- padding-right: 72px;
99
- padding-top: 40px;
94
+ padding-left: var(--intergalactic-spacing-8x, 32px);
95
+ padding-bottom: var(--intergalactic-spacing-2x, 8px);
96
+ padding-right: calc(
97
+ var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px)
98
+ );
99
+ padding-top: var(--intergalactic-spacing-10x, 40px);
100
100
  min-height: 76px;
101
- box-shadow: inset 0 -1px 0 var(--gray-200);
101
+ box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, #c4c7cf);
102
102
  box-sizing: border-box;
103
103
  }
104
104
 
105
105
  SFooter {
106
106
  min-height: 52px;
107
- box-shadow: inset 0 1px 1px 0 var(--gray-200);
107
+ box-shadow: inset 0 1px 1px 0 var(--intergalactic-border-primary, #c4c7cf);
108
108
  box-sizing: border-box;
109
109
  }
110
110
 
@@ -115,10 +115,10 @@ SBody {
115
115
  }
116
116
 
117
117
  SSection {
118
- padding-top: 24px;
119
- padding-bottom: 24px;
120
- padding-left: 32px;
121
- padding-right: 32px;
118
+ padding-top: var(--intergalactic-spacing-6x, 24px);
119
+ padding-bottom: var(--intergalactic-spacing-6x, 24px);
120
+ padding-left: var(--intergalactic-spacing-8x, 32px);
121
+ padding-right: var(--intergalactic-spacing-8x, 32px);
122
122
  flex: 1 1 auto;
123
123
  }
124
124
 
package/lib/es6/FullscreenModal.js CHANGED
@@ -38,22 +38,22 @@ var style = (
38
38
  /*__reshadow_css_start__*/
39
39
  _sstyled.insert(
40
40
  /*__inner_css_start__*/
41
- ".___SFullscreenOverlay_1shks_gg_{padding:0}.___SFullscreenModal_1shks_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_1shks_gg_,.___SClose_1shks_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1shks_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_1shks_gg_:hover{color:#8a8e9b}.___SBack_1shks_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_1shks_gg_:hover{color:#484a54}.___SBackText_1shks_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1shks_gg_,.___STitle_1shks_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1shks_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_1shks_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_1shks_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_1shks_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_1shks_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_1shks_gg_{display:flex;height:100%;overflow:auto}.___SSection_1shks_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1shks_gg_{transition:none}}"
41
+ ".___SFullscreenOverlay_1n1eq_gg_{padding:0}.___SFullscreenModal_1n1eq_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral,#fff);border-radius:0;padding:0}.___SBack_1n1eq_gg_,.___SClose_1n1eq_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1n1eq_gg_{top:17px;right:23px;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SClose_1n1eq_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SBack_1n1eq_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-primary-neutral,#6c6e79);font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%)}.___SBack_1n1eq_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active,#484a54)}.___SBackText_1n1eq_gg_{margin-left:var(--intergalactic-spacing-1x,4px);font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1n1eq_gg_,.___STitle_1n1eq_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1n1eq_gg_{font-size:var(--intergalactic-fs-500,24px);line-height:var(--intergalactic-lh-500,117%);font-weight:var(--intergalactic-bold,700);font-family:FactorA-Bold,sans-serif;color:var(--intergalactic-text-primary,#191b23)}.___SDescription_1n1eq_gg_{display:flex;align-items:baseline;font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%);color:var(--intergalactic-text-secondary,#6c6e79)}.___SDescription_1n1eq_gg_:before{content:\"\";position:relative;top:var(--intergalactic-spacing-1x,4px);display:block;margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px);height:24px;width:1px;background-color:var(--intergalactic-border-primary,#c4c7cf)}.___SHeader_1n1eq_gg_{display:flex;align-items:baseline;padding-left:var(--intergalactic-spacing-8x,32px);padding-bottom:var(--intergalactic-spacing-2x,8px);padding-right:calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));padding-top:var(--intergalactic-spacing-10x,40px);min-height:76px;box-shadow:inset 0 -1px 0 var(--intergalactic-border-primary,#c4c7cf);box-sizing:border-box}.___SFooter_1n1eq_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary,#c4c7cf);box-sizing:border-box}.___SBody_1n1eq_gg_{display:flex;height:100%;overflow:auto}.___SSection_1n1eq_gg_{padding-top:var(--intergalactic-spacing-6x,24px);padding-bottom:var(--intergalactic-spacing-6x,24px);padding-left:var(--intergalactic-spacing-8x,32px);padding-right:var(--intergalactic-spacing-8x,32px);flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1n1eq_gg_{transition:none}}"
42
42
  /*__inner_css_end__*/
43
- , "1shks_gg_")
43
+ , "1n1eq_gg_")
44
44
  /*__reshadow_css_end__*/
45
45
  , {
46
- "__SFullscreenOverlay": "___SFullscreenOverlay_1shks_gg_",
47
- "__SFullscreenModal": "___SFullscreenModal_1shks_gg_",
48
- "__SBack": "___SBack_1shks_gg_",
49
- "__SClose": "___SClose_1shks_gg_",
50
- "__SBackText": "___SBackText_1shks_gg_",
51
- "__SDescription": "___SDescription_1shks_gg_",
52
- "__STitle": "___STitle_1shks_gg_",
53
- "__SHeader": "___SHeader_1shks_gg_",
54
- "__SFooter": "___SFooter_1shks_gg_",
55
- "__SBody": "___SBody_1shks_gg_",
56
- "__SSection": "___SSection_1shks_gg_"
46
+ "__SFullscreenOverlay": "___SFullscreenOverlay_1n1eq_gg_",
47
+ "__SFullscreenModal": "___SFullscreenModal_1n1eq_gg_",
48
+ "__SBack": "___SBack_1n1eq_gg_",
49
+ "__SClose": "___SClose_1n1eq_gg_",
50
+ "__SBackText": "___SBackText_1n1eq_gg_",
51
+ "__SDescription": "___SDescription_1n1eq_gg_",
52
+ "__STitle": "___STitle_1n1eq_gg_",
53
+ "__SHeader": "___SHeader_1n1eq_gg_",
54
+ "__SFooter": "___SFooter_1n1eq_gg_",
55
+ "__SBody": "___SBody_1n1eq_gg_",
56
+ "__SSection": "___SSection_1n1eq_gg_"
57
57
  });
58
58
 
59
59
  var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
package/lib/es6/style/fullscreen-modal.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SFullscreenOverlay {
4
2
  padding: 0;
5
3
  }
@@ -9,7 +7,7 @@ SFullscreenModal {
9
7
  display: flex;
10
8
  flex-direction: column;
11
9
  width: 100%;
12
- background: var(--white);
10
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
13
11
  border-radius: 0;
14
12
  padding: 0;
15
13
  }
@@ -24,11 +22,11 @@ SBack {
24
22
  SClose {
25
23
  top: 17px;
26
24
  right: 23px;
27
- padding: 12px;
28
- color: var(--gray-300);
25
+ padding: var(--intergalactic-spacing-3x, 12px);
26
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
29
27
 
30
28
  &:hover {
31
- color: var(--gray-400);
29
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
32
30
  }
33
31
  }
34
32
 
@@ -37,20 +35,20 @@ SBack {
37
35
  left: 32px;
38
36
  display: flex;
39
37
  align-items: center;
40
- margin-bottom: 12px;
41
- color: var(--gray-500);
42
- font-size: var(--fs-100);
43
- line-height: var(--lh-100);
38
+ margin-bottom: var(--intergalactic-spacing-3x, 12px);
39
+ color: var(--intergalactic-icon-primary-neutral, #6c6e79);
40
+ font-size: var(--intergalactic-fs-100, 12px);
41
+ line-height: var(--intergalactic-lh-100, 133%);
44
42
 
45
43
  &:hover {
46
- color: var(--gray-600);
44
+ color: var(--intergalactic-icon-primary-neutral-hover-active, #484a54);
47
45
  }
48
46
  }
49
47
 
50
48
  SBackText {
51
- margin-left: 4px;
52
- font-size: var(--fs-200);
53
- line-height: var(--lh-200);
49
+ margin-left: var(--intergalactic-spacing-1x, 4px);
50
+ font-size: var(--intergalactic-fs-200, 14px);
51
+ line-height: var(--intergalactic-lh-200, 142%);
54
52
  white-space: nowrap;
55
53
  overflow: hidden;
56
54
  text-overflow: ellipsis;
@@ -63,48 +61,50 @@ SDescription {
63
61
  }
64
62
 
65
63
  STitle {
66
- font-size: var(--fs-500);
67
- line-height: var(--lh-500);
68
- font-weight: 700;
64
+ font-size: var(--intergalactic-fs-500, 24px);
65
+ line-height: var(--intergalactic-lh-500, 117%);
66
+ font-weight: var(--intergalactic-bold, 700);
69
67
  font-family: FactorA-Bold, sans-serif;
70
- color: var(--gray-800);
68
+ color: var(--intergalactic-text-primary, #191b23);
71
69
  }
72
70
 
73
71
  SDescription {
74
72
  display: flex;
75
73
  align-items: baseline;
76
- font-size: var(--fs-100);
77
- line-height: var(--lh-100);
78
- color: var(--gray-500);
74
+ font-size: var(--intergalactic-fs-100, 12px);
75
+ line-height: var(--intergalactic-lh-100, 133%);
76
+ color: var(--intergalactic-text-secondary, #6c6e79);
79
77
 
80
78
  &::before {
81
79
  content: '';
82
80
  position: relative;
83
- top: 4px;
81
+ top: var(--intergalactic-spacing-1x, 4px);
84
82
  display: block;
85
- margin-left: 12px;
86
- margin-right: 12px;
83
+ margin-left: var(--intergalactic-spacing-3x, 12px);
84
+ margin-right: var(--intergalactic-spacing-3x, 12px);
87
85
  height: 24px;
88
86
  width: 1px;
89
- background-color: var(--gray-200);
87
+ background-color: var(--intergalactic-border-primary, #c4c7cf);
90
88
  }
91
89
  }
92
90
 
93
91
  SHeader {
94
92
  display: flex;
95
93
  align-items: baseline;
96
- padding-left: 32px;
97
- padding-bottom: 8px;
98
- padding-right: 72px;
99
- padding-top: 40px;
94
+ padding-left: var(--intergalactic-spacing-8x, 32px);
95
+ padding-bottom: var(--intergalactic-spacing-2x, 8px);
96
+ padding-right: calc(
97
+ var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px)
98
+ );
99
+ padding-top: var(--intergalactic-spacing-10x, 40px);
100
100
  min-height: 76px;
101
- box-shadow: inset 0 -1px 0 var(--gray-200);
101
+ box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, #c4c7cf);
102
102
  box-sizing: border-box;
103
103
  }
104
104
 
105
105
  SFooter {
106
106
  min-height: 52px;
107
- box-shadow: inset 0 1px 1px 0 var(--gray-200);
107
+ box-shadow: inset 0 1px 1px 0 var(--intergalactic-border-primary, #c4c7cf);
108
108
  box-sizing: border-box;
109
109
  }
110
110
 
@@ -115,10 +115,10 @@ SBody {
115
115
  }
116
116
 
117
117
  SSection {
118
- padding-top: 24px;
119
- padding-bottom: 24px;
120
- padding-left: 32px;
121
- padding-right: 32px;
118
+ padding-top: var(--intergalactic-spacing-6x, 24px);
119
+ padding-bottom: var(--intergalactic-spacing-6x, 24px);
120
+ padding-left: var(--intergalactic-spacing-8x, 32px);
121
+ padding-right: var(--intergalactic-spacing-8x, 32px);
122
122
  flex: 1 1 auto;
123
123
  }
124
124
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/fullscreen-modal",
3
3
  "description": "Semrush FullscreenModal Component",
4
- "version": "2.1.10",
4
+ "version": "2.2.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -17,7 +17,8 @@
17
17
  },
18
18
  "peerDependencies": {
19
19
  "@semcore/core": "^1.11",
20
- "react": "16.8 - 18"
20
+ "react": "16.8 - 18",
21
+ "react-dom": "16.8 - 18"
21
22
  },
22
23
  "jest": {
23
24
  "preset": "@semcore/jest-preset-ui"