@semcore/card 4.1.8 → 4.2.0

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 +3 -3
  2. package/lib/cjs/Card.js +9 -9
  3. package/lib/cjs/style/card.shadow.css +28 -26
  4. package/lib/es6/Card.js +9 -9
  5. package/lib/es6/style/card.shadow.css +28 -26
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [4.1.8] - 2022-11-30
5
+ ## [4.2.0] - 2022-12-12
6
6
 
7
- ### Changed
7
+ ### Added
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/utils` [3.40.0 ~> 3.41.0]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [4.1.6] - 2022-11-08
12
12
 
package/lib/cjs/Card.js CHANGED
@@ -52,18 +52,18 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SCard_73z1j_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_73z1j_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_73z1j_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_73z1j_gg_{display:inline-flex;vertical-align:middle}.___SDescription_73z1j_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_73z1j_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_73z1j_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
55
+ ".___SCard_1eq2s_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral,#fff);padding:0;border:none;border-radius:var(--intergalactic-rounded-medium,6px);box-shadow:var(--intergalactic-box-shadow-card,0 0 1px 0 rgba(25,27,35,.16),0 1px 2px 0 rgba(25,27,35,.12));font-family:var(--intergalactic-base,Inter),sans-serif}.___STitle_1eq2s_gg_{color:var(--intergalactic-text-primary,#191b23);font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%);font-weight:var(--intergalactic-bold,700);margin-right:var(--intergalactic-spacing-1x,4px)}.___SIcon_1eq2s_gg_{color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:help;margin-right:var(--intergalactic-spacing-1x,4px)}.___STooltip_1eq2s_gg_{display:inline-flex;vertical-align:middle}.___SDescription_1eq2s_gg_{margin-bottom:0;margin-top:var(--intergalactic-spacing-2x,8px);font-size:var(--intergalactic-fs-200,14px);color:var(--intergalactic-text-secondary,#6c6e79)}.___SHeader_1eq2s_gg_{padding-top:var(--intergalactic-spacing-2x,8px);padding-bottom:var(--intergalactic-spacing-2x,8px);padding-left:var(--intergalactic-spacing-5x,20px);padding-right:var(--intergalactic-spacing-5x,20px);box-shadow:inset 0 -1px 0 var(--intergalactic-border-secondary,#e0e1e9)}.___SBody_1eq2s_gg_{color:var(--intergalactic-text-primary,#191b23);padding-bottom:var(--intergalactic-spacing-5x,20px);padding-left:var(--intergalactic-spacing-5x,20px);padding-right:var(--intergalactic-spacing-5x,20px);padding-top:var(--intergalactic-spacing-5x,20px)}"
56
56
  /*__inner_css_end__*/
57
- , "73z1j_gg_")
57
+ , "1eq2s_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SCard": "___SCard_73z1j_gg_",
61
- "__STitle": "___STitle_73z1j_gg_",
62
- "__SIcon": "___SIcon_73z1j_gg_",
63
- "__STooltip": "___STooltip_73z1j_gg_",
64
- "__SDescription": "___SDescription_73z1j_gg_",
65
- "__SHeader": "___SHeader_73z1j_gg_",
66
- "__SBody": "___SBody_73z1j_gg_"
60
+ "__SCard": "___SCard_1eq2s_gg_",
61
+ "__STitle": "___STitle_1eq2s_gg_",
62
+ "__SIcon": "___SIcon_1eq2s_gg_",
63
+ "__STooltip": "___STooltip_1eq2s_gg_",
64
+ "__SDescription": "___SDescription_1eq2s_gg_",
65
+ "__SHeader": "___SHeader_1eq2s_gg_",
66
+ "__SBody": "___SBody_1eq2s_gg_"
67
67
  });
68
68
 
69
69
  var CardRoot = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/card.shadow.css CHANGED
@@ -1,27 +1,29 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SCard {
4
2
  box-sizing: border-box;
5
- background: var(--white);
3
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
6
4
  padding: 0;
7
5
  border: none;
8
- border-radius: var(--rounded-m);
9
- box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
10
- font-family: Inter, sans-serif;
6
+ border-radius: var(--intergalactic-rounded-medium, 6px);
7
+ box-shadow: var(
8
+ --intergalactic-box-shadow-card,
9
+ 0px 0px 1px 0px rgba(25, 27, 35, 0.16),
10
+ 0px 1px 2px 0px rgba(25, 27, 35, 0.12)
11
+ );
12
+ font-family: var(--intergalactic-base, Inter), sans-serif;
11
13
  }
12
14
 
13
15
  STitle {
14
- color: var(--gray-800);
15
- font-size: var(--fs-300);
16
- line-height: var(--lh-300);
17
- font-weight: 700;
18
- margin-right: 4px;
16
+ color: var(--intergalactic-text-primary, #191b23);
17
+ font-size: var(--intergalactic-fs-300, 16px);
18
+ line-height: var(--intergalactic-lh-300, 150%);
19
+ font-weight: var(--intergalactic-bold, 700);
20
+ margin-right: var(--intergalactic-spacing-1x, 4px);
19
21
  }
20
22
 
21
23
  SIcon {
22
- color: var(--gray-300);
24
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
23
25
  cursor: help;
24
- margin-right: 4px;
26
+ margin-right: var(--intergalactic-spacing-1x, 4px);
25
27
  }
26
28
  STooltip {
27
29
  display: inline-flex;
@@ -30,23 +32,23 @@ STooltip {
30
32
 
31
33
  SDescription {
32
34
  margin-bottom: 0;
33
- margin-top: 8px;
34
- font-size: var(--fs-200);
35
- color: var(--gray-500);
35
+ margin-top: var(--intergalactic-spacing-2x, 8px);
36
+ font-size: var(--intergalactic-fs-200, 14px);
37
+ color: var(--intergalactic-text-secondary, #6c6e79);
36
38
  }
37
39
 
38
40
  SHeader {
39
- padding-top: 8px;
40
- padding-bottom: 8px;
41
- padding-left: 20px;
42
- padding-right: 20px;
43
- box-shadow: inset 0 -1px 0 var(--gray-100);
41
+ padding-top: var(--intergalactic-spacing-2x, 8px);
42
+ padding-bottom: var(--intergalactic-spacing-2x, 8px);
43
+ padding-left: var(--intergalactic-spacing-5x, 20px);
44
+ padding-right: var(--intergalactic-spacing-5x, 20px);
45
+ box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, #e0e1e9);
44
46
  }
45
47
 
46
48
  SBody {
47
- color: var(--gray-800);
48
- padding-bottom: 20px;
49
- padding-left: 20px;
50
- padding-right: 20px;
51
- padding-top: 20px;
49
+ color: var(--intergalactic-text-primary, #191b23);
50
+ padding-bottom: var(--intergalactic-spacing-5x, 20px);
51
+ padding-left: var(--intergalactic-spacing-5x, 20px);
52
+ padding-right: var(--intergalactic-spacing-5x, 20px);
53
+ padding-top: var(--intergalactic-spacing-5x, 20px);
52
54
  }
package/lib/es6/Card.js CHANGED
@@ -31,18 +31,18 @@ var style = (
31
31
  /*__reshadow_css_start__*/
32
32
  _sstyled.insert(
33
33
  /*__inner_css_start__*/
34
- ".___SCard_73z1j_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_73z1j_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_73z1j_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_73z1j_gg_{display:inline-flex;vertical-align:middle}.___SDescription_73z1j_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_73z1j_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_73z1j_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
34
+ ".___SCard_1eq2s_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral,#fff);padding:0;border:none;border-radius:var(--intergalactic-rounded-medium,6px);box-shadow:var(--intergalactic-box-shadow-card,0 0 1px 0 rgba(25,27,35,.16),0 1px 2px 0 rgba(25,27,35,.12));font-family:var(--intergalactic-base,Inter),sans-serif}.___STitle_1eq2s_gg_{color:var(--intergalactic-text-primary,#191b23);font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%);font-weight:var(--intergalactic-bold,700);margin-right:var(--intergalactic-spacing-1x,4px)}.___SIcon_1eq2s_gg_{color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:help;margin-right:var(--intergalactic-spacing-1x,4px)}.___STooltip_1eq2s_gg_{display:inline-flex;vertical-align:middle}.___SDescription_1eq2s_gg_{margin-bottom:0;margin-top:var(--intergalactic-spacing-2x,8px);font-size:var(--intergalactic-fs-200,14px);color:var(--intergalactic-text-secondary,#6c6e79)}.___SHeader_1eq2s_gg_{padding-top:var(--intergalactic-spacing-2x,8px);padding-bottom:var(--intergalactic-spacing-2x,8px);padding-left:var(--intergalactic-spacing-5x,20px);padding-right:var(--intergalactic-spacing-5x,20px);box-shadow:inset 0 -1px 0 var(--intergalactic-border-secondary,#e0e1e9)}.___SBody_1eq2s_gg_{color:var(--intergalactic-text-primary,#191b23);padding-bottom:var(--intergalactic-spacing-5x,20px);padding-left:var(--intergalactic-spacing-5x,20px);padding-right:var(--intergalactic-spacing-5x,20px);padding-top:var(--intergalactic-spacing-5x,20px)}"
35
35
  /*__inner_css_end__*/
36
- , "73z1j_gg_")
36
+ , "1eq2s_gg_")
37
37
  /*__reshadow_css_end__*/
38
38
  , {
39
- "__SCard": "___SCard_73z1j_gg_",
40
- "__STitle": "___STitle_73z1j_gg_",
41
- "__SIcon": "___SIcon_73z1j_gg_",
42
- "__STooltip": "___STooltip_73z1j_gg_",
43
- "__SDescription": "___SDescription_73z1j_gg_",
44
- "__SHeader": "___SHeader_73z1j_gg_",
45
- "__SBody": "___SBody_73z1j_gg_"
39
+ "__SCard": "___SCard_1eq2s_gg_",
40
+ "__STitle": "___STitle_1eq2s_gg_",
41
+ "__SIcon": "___SIcon_1eq2s_gg_",
42
+ "__STooltip": "___STooltip_1eq2s_gg_",
43
+ "__SDescription": "___SDescription_1eq2s_gg_",
44
+ "__SHeader": "___SHeader_1eq2s_gg_",
45
+ "__SBody": "___SBody_1eq2s_gg_"
46
46
  });
47
47
  import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
48
48
 
package/lib/es6/style/card.shadow.css CHANGED
@@ -1,27 +1,29 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SCard {
4
2
  box-sizing: border-box;
5
- background: var(--white);
3
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
6
4
  padding: 0;
7
5
  border: none;
8
- border-radius: var(--rounded-m);
9
- box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
10
- font-family: Inter, sans-serif;
6
+ border-radius: var(--intergalactic-rounded-medium, 6px);
7
+ box-shadow: var(
8
+ --intergalactic-box-shadow-card,
9
+ 0px 0px 1px 0px rgba(25, 27, 35, 0.16),
10
+ 0px 1px 2px 0px rgba(25, 27, 35, 0.12)
11
+ );
12
+ font-family: var(--intergalactic-base, Inter), sans-serif;
11
13
  }
12
14
 
13
15
  STitle {
14
- color: var(--gray-800);
15
- font-size: var(--fs-300);
16
- line-height: var(--lh-300);
17
- font-weight: 700;
18
- margin-right: 4px;
16
+ color: var(--intergalactic-text-primary, #191b23);
17
+ font-size: var(--intergalactic-fs-300, 16px);
18
+ line-height: var(--intergalactic-lh-300, 150%);
19
+ font-weight: var(--intergalactic-bold, 700);
20
+ margin-right: var(--intergalactic-spacing-1x, 4px);
19
21
  }
20
22
 
21
23
  SIcon {
22
- color: var(--gray-300);
24
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
23
25
  cursor: help;
24
- margin-right: 4px;
26
+ margin-right: var(--intergalactic-spacing-1x, 4px);
25
27
  }
26
28
  STooltip {
27
29
  display: inline-flex;
@@ -30,23 +32,23 @@ STooltip {
30
32
 
31
33
  SDescription {
32
34
  margin-bottom: 0;
33
- margin-top: 8px;
34
- font-size: var(--fs-200);
35
- color: var(--gray-500);
35
+ margin-top: var(--intergalactic-spacing-2x, 8px);
36
+ font-size: var(--intergalactic-fs-200, 14px);
37
+ color: var(--intergalactic-text-secondary, #6c6e79);
36
38
  }
37
39
 
38
40
  SHeader {
39
- padding-top: 8px;
40
- padding-bottom: 8px;
41
- padding-left: 20px;
42
- padding-right: 20px;
43
- box-shadow: inset 0 -1px 0 var(--gray-100);
41
+ padding-top: var(--intergalactic-spacing-2x, 8px);
42
+ padding-bottom: var(--intergalactic-spacing-2x, 8px);
43
+ padding-left: var(--intergalactic-spacing-5x, 20px);
44
+ padding-right: var(--intergalactic-spacing-5x, 20px);
45
+ box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, #e0e1e9);
44
46
  }
45
47
 
46
48
  SBody {
47
- color: var(--gray-800);
48
- padding-bottom: 20px;
49
- padding-left: 20px;
50
- padding-right: 20px;
51
- padding-top: 20px;
49
+ color: var(--intergalactic-text-primary, #191b23);
50
+ padding-bottom: var(--intergalactic-spacing-5x, 20px);
51
+ padding-left: var(--intergalactic-spacing-5x, 20px);
52
+ padding-right: var(--intergalactic-spacing-5x, 20px);
53
+ padding-top: var(--intergalactic-spacing-5x, 20px);
52
54
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/card",
3
3
  "description": "Semrush Card Component",
4
- "version": "4.1.8",
4
+ "version": "4.2.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",