@semcore/skeleton 4.3.2 → 4.4.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/Skeleton.js +8 -8
  3. package/lib/cjs/style/skeleton.shadow.css +2 -4
  4. package/lib/es6/Skeleton.js +8 -8
  5. package/lib/es6/style/skeleton.shadow.css +2 -4
  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
- ## [4.3.2] - 2022-11-30
5
+ ## [4.4.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
+ ## [4.4.0] - 2022-12-12
12
+
13
+ ### Added
14
+
15
+ - Design tokens based theming.
10
16
 
11
17
  ## [4.3.0] - 2022-11-24
12
18
 
package/lib/cjs/Skeleton.js CHANGED
@@ -52,17 +52,17 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SSkeleton_1r761_gg_{animation-name:pulse_1r761;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1r761);will-change:opacity}@keyframes pulse_1r761{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1r761_gg_._theme_invert_1r761_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1r761_gg_._theme_dark_1r761_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1r761_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1r761_gg_{animation-name:none}}"
55
+ ".___SSkeleton_1hi60_gg_{animation-name:pulse_1hi60;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1hi60);will-change:opacity}@keyframes pulse_1hi60{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1hi60_gg_._theme_invert_1hi60_gg_{fill:var(--intergalactic-skeleton-bg,rgba(224,225,233,.8))}.___SSkeleton_1hi60_gg_._theme_dark_1hi60_gg_{fill:var(--intergalactic-skeleton-bg-invert,hsla(0,0%,100%,.3))}.___SText_1hi60_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1hi60_gg_{animation-name:none}}"
56
56
  /*__inner_css_end__*/
57
- , "1r761_gg_")
57
+ , "1hi60_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SSkeleton": "___SSkeleton_1r761_gg_",
61
- "--durationAnim": "--durationAnim_1r761",
62
- "@pulse": "pulse_1r761",
63
- "_theme_invert": "_theme_invert_1r761_gg_",
64
- "_theme_dark": "_theme_dark_1r761_gg_",
65
- "__SText": "___SText_1r761_gg_"
60
+ "__SSkeleton": "___SSkeleton_1hi60_gg_",
61
+ "--durationAnim": "--durationAnim_1hi60",
62
+ "@pulse": "pulse_1hi60",
63
+ "_theme_invert": "_theme_invert_1hi60_gg_",
64
+ "_theme_dark": "_theme_dark_1hi60_gg_",
65
+ "__SText": "___SText_1hi60_gg_"
66
66
  });
67
67
  var MAP_COLOR_THEME = {
68
68
  dark: 'rgba(255, 255, 255, 0.3)',
package/lib/cjs/style/skeleton.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SSkeleton {
4
2
  animation-name: pulse;
5
3
  animation-iteration-count: infinite;
@@ -21,11 +19,11 @@ SSkeleton {
21
19
  }
22
20
 
23
21
  SSkeleton[theme='invert'] {
24
- fill: color-mod(var(--gray-100) a(80%));
22
+ fill: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
25
23
  }
26
24
 
27
25
  SSkeleton[theme='dark'] {
28
- fill: color-mod(var(--white) a(30%));
26
+ fill: var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3));
29
27
  }
30
28
 
31
29
  SText {
package/lib/es6/Skeleton.js CHANGED
@@ -28,17 +28,17 @@ var style = (
28
28
  /*__reshadow_css_start__*/
29
29
  _sstyled.insert(
30
30
  /*__inner_css_start__*/
31
- ".___SSkeleton_1r761_gg_{animation-name:pulse_1r761;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1r761);will-change:opacity}@keyframes pulse_1r761{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1r761_gg_._theme_invert_1r761_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1r761_gg_._theme_dark_1r761_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1r761_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1r761_gg_{animation-name:none}}"
31
+ ".___SSkeleton_1hi60_gg_{animation-name:pulse_1hi60;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1hi60);will-change:opacity}@keyframes pulse_1hi60{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1hi60_gg_._theme_invert_1hi60_gg_{fill:var(--intergalactic-skeleton-bg,rgba(224,225,233,.8))}.___SSkeleton_1hi60_gg_._theme_dark_1hi60_gg_{fill:var(--intergalactic-skeleton-bg-invert,hsla(0,0%,100%,.3))}.___SText_1hi60_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1hi60_gg_{animation-name:none}}"
32
32
  /*__inner_css_end__*/
33
- , "1r761_gg_")
33
+ , "1hi60_gg_")
34
34
  /*__reshadow_css_end__*/
35
35
  , {
36
- "__SSkeleton": "___SSkeleton_1r761_gg_",
37
- "--durationAnim": "--durationAnim_1r761",
38
- "@pulse": "pulse_1r761",
39
- "_theme_invert": "_theme_invert_1r761_gg_",
40
- "_theme_dark": "_theme_dark_1r761_gg_",
41
- "__SText": "___SText_1r761_gg_"
36
+ "__SSkeleton": "___SSkeleton_1hi60_gg_",
37
+ "--durationAnim": "--durationAnim_1hi60",
38
+ "@pulse": "pulse_1hi60",
39
+ "_theme_invert": "_theme_invert_1hi60_gg_",
40
+ "_theme_dark": "_theme_dark_1hi60_gg_",
41
+ "__SText": "___SText_1hi60_gg_"
42
42
  });
43
43
  var MAP_COLOR_THEME = {
44
44
  dark: 'rgba(255, 255, 255, 0.3)',
package/lib/es6/style/skeleton.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SSkeleton {
4
2
  animation-name: pulse;
5
3
  animation-iteration-count: infinite;
@@ -21,11 +19,11 @@ SSkeleton {
21
19
  }
22
20
 
23
21
  SSkeleton[theme='invert'] {
24
- fill: color-mod(var(--gray-100) a(80%));
22
+ fill: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
25
23
  }
26
24
 
27
25
  SSkeleton[theme='dark'] {
28
- fill: color-mod(var(--white) a(30%));
26
+ fill: var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3));
29
27
  }
30
28
 
31
29
  SText {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/skeleton",
3
3
  "description": "Semrush Skeleton Component",
4
- "version": "4.3.2",
4
+ "version": "4.4.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "types": "lib/types/index.d.ts",
@@ -14,7 +14,8 @@
14
14
  },
15
15
  "peerDependencies": {
16
16
  "@semcore/core": "^1.11",
17
- "react": "16.8 - 18"
17
+ "react": "16.8 - 18",
18
+ "react-dom": "16.8 - 18"
18
19
  },
19
20
  "jest": {
20
21
  "preset": "@semcore/jest-preset-ui"