@semcore/skeleton 4.3.1 → 4.4.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/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 +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.3.1] - 2022-11-30
5
+ ## [4.4.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], `@semcore/flex-box` [4.6.3 ~> 4.6.4]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [4.3.0] - 2022-11-24
12
12
 
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_vw3hb_gg_{animation-name:pulse_vw3hb;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_vw3hb);will-change:opacity}@keyframes pulse_vw3hb{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_vw3hb_gg_._theme_invert_vw3hb_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_vw3hb_gg_._theme_dark_vw3hb_gg_{fill:hsla(0,0%,100%,.3)}.___SText_vw3hb_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_vw3hb_gg_{animation-name:none}}"
55
+ ".___SSkeleton_18myx_gg_{animation-name:pulse_18myx;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_18myx);will-change:opacity}@keyframes pulse_18myx{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_18myx_gg_._theme_invert_18myx_gg_{fill:var(--intergalactic-skeleton-bg,rgba(224,225,233,.8))}.___SSkeleton_18myx_gg_._theme_dark_18myx_gg_{fill:var(--intergalactic-skeleton-bg-invert,hsla(0,0%,100%,.3))}.___SText_18myx_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_18myx_gg_{animation-name:none}}"
56
56
  /*__inner_css_end__*/
57
- , "vw3hb_gg_")
57
+ , "18myx_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SSkeleton": "___SSkeleton_vw3hb_gg_",
61
- "--durationAnim": "--durationAnim_vw3hb",
62
- "@pulse": "pulse_vw3hb",
63
- "_theme_invert": "_theme_invert_vw3hb_gg_",
64
- "_theme_dark": "_theme_dark_vw3hb_gg_",
65
- "__SText": "___SText_vw3hb_gg_"
60
+ "__SSkeleton": "___SSkeleton_18myx_gg_",
61
+ "--durationAnim": "--durationAnim_18myx",
62
+ "@pulse": "pulse_18myx",
63
+ "_theme_invert": "_theme_invert_18myx_gg_",
64
+ "_theme_dark": "_theme_dark_18myx_gg_",
65
+ "__SText": "___SText_18myx_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_vw3hb_gg_{animation-name:pulse_vw3hb;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_vw3hb);will-change:opacity}@keyframes pulse_vw3hb{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_vw3hb_gg_._theme_invert_vw3hb_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_vw3hb_gg_._theme_dark_vw3hb_gg_{fill:hsla(0,0%,100%,.3)}.___SText_vw3hb_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_vw3hb_gg_{animation-name:none}}"
31
+ ".___SSkeleton_18myx_gg_{animation-name:pulse_18myx;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_18myx);will-change:opacity}@keyframes pulse_18myx{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_18myx_gg_._theme_invert_18myx_gg_{fill:var(--intergalactic-skeleton-bg,rgba(224,225,233,.8))}.___SSkeleton_18myx_gg_._theme_dark_18myx_gg_{fill:var(--intergalactic-skeleton-bg-invert,hsla(0,0%,100%,.3))}.___SText_18myx_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_18myx_gg_{animation-name:none}}"
32
32
  /*__inner_css_end__*/
33
- , "vw3hb_gg_")
33
+ , "18myx_gg_")
34
34
  /*__reshadow_css_end__*/
35
35
  , {
36
- "__SSkeleton": "___SSkeleton_vw3hb_gg_",
37
- "--durationAnim": "--durationAnim_vw3hb",
38
- "@pulse": "pulse_vw3hb",
39
- "_theme_invert": "_theme_invert_vw3hb_gg_",
40
- "_theme_dark": "_theme_dark_vw3hb_gg_",
41
- "__SText": "___SText_vw3hb_gg_"
36
+ "__SSkeleton": "___SSkeleton_18myx_gg_",
37
+ "--durationAnim": "--durationAnim_18myx",
38
+ "@pulse": "pulse_18myx",
39
+ "_theme_invert": "_theme_invert_18myx_gg_",
40
+ "_theme_dark": "_theme_dark_18myx_gg_",
41
+ "__SText": "___SText_18myx_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.1",
4
+ "version": "4.4.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "types": "lib/types/index.d.ts",