@semcore/carousel 2.1.10 → 2.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 (7) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/lib/cjs/Carousel.js +13 -13
  3. package/lib/cjs/style/carousel.shadow.css +10 -12
  4. package/lib/es6/Carousel.js +13 -13
  5. package/lib/es6/style/carousel.shadow.css +10 -12
  6. package/package.json +1 -1
  7. package/src/style/carousel.shadow.css +10 -12
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
- ## [2.1.10] - 2022-11-30
5
+ ## [2.2.0] - 2022-12-12
6
6
 
7
- ### Changed
7
+ ### Added
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/flex-box` [4.6.4 ~> 4.6.5], `@semcore/utils` [3.41.0 ~> 3.42.0]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [2.1.7] - 2022-11-08
12
12
 
package/lib/cjs/Carousel.js CHANGED
@@ -56,22 +56,22 @@ var style = (
56
56
  /*__reshadow_css_start__*/
57
57
  _core.sstyled.insert(
58
58
  /*__inner_css_start__*/
59
- ".___SCarousel_1pxw8_gg_{overflow:hidden;outline:none}.___SContainer_1pxw8_gg_{display:flex;transition:transform var(--duration_1pxw8) ease-in-out}.___SItem_1pxw8_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1pxw8);border-radius:6px;overflow:hidden}.___SIndicators_1pxw8_gg_{display:flex;justify-content:center;margin-top:16px}.___SIndicator_1pxw8_gg_{margin:0 6px;cursor:pointer;display:block;width:12px;height:12px;border-radius:6px;background-color:#a9abb6;opacity:.3;-o-object-fit:cover;object-fit:cover;transition:opacity .1s ease-in-out}.___SIndicator_1pxw8_gg_:hover{opacity:.6}.___SIndicator_1pxw8_gg_.__active_1pxw8_gg_{opacity:1}.___SNext_1pxw8_gg_,.___SPrev_1pxw8_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.___SPrev_1pxw8_gg_{margin-right:12px}.___SNext_1pxw8_gg_{margin-left:12px}.___SNext_1pxw8_gg_.__disabled_1pxw8_gg_,.___SPrev_1pxw8_gg_.__disabled_1pxw8_gg_{opacity:0.3;cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1pxw8_gg_{transition:none}}"
59
+ ".___SCarousel_atk5n_gg_{overflow:hidden;outline:none}.___SContainer_atk5n_gg_{display:flex;transition:transform var(--duration_atk5n) ease-in-out}.___SItem_atk5n_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_atk5n);border-radius:var(--intergalactic-rounded-medium,6px);overflow:hidden}.___SIndicators_atk5n_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x,16px)}.___SIndicator_atk5n_gg_{margin:0 calc(var(--intergalactic-spacing-3x, 12px)*0.5);cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-rounded-medium,6px);background-color:var(--intergalactic-icon-secondary-neutral,#a9abb6);opacity:var(--intergalactic-disabled-opacity,.3);-o-object-fit:cover;object-fit:cover;transition:opacity .1s ease-in-out}.___SIndicator_atk5n_gg_:hover{opacity:calc(var(--intergalactic-disabled-opacity, .3)*2)}.___SIndicator_atk5n_gg_.__active_atk5n_gg_{opacity:1}.___SNext_atk5n_gg_,.___SPrev_atk5n_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.___SPrev_atk5n_gg_{margin-right:var(--intergalactic-spacing-3x,12px)}.___SNext_atk5n_gg_{margin-left:var(--intergalactic-spacing-3x,12px)}.___SNext_atk5n_gg_.__disabled_atk5n_gg_,.___SPrev_atk5n_gg_.__disabled_atk5n_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_atk5n_gg_{transition:none}}"
60
60
  /*__inner_css_end__*/
61
- , "1pxw8_gg_")
61
+ , "atk5n_gg_")
62
62
  /*__reshadow_css_end__*/
63
63
  , {
64
- "__SCarousel": "___SCarousel_1pxw8_gg_",
65
- "__SContainer": "___SContainer_1pxw8_gg_",
66
- "--duration": "--duration_1pxw8",
67
- "__SItem": "___SItem_1pxw8_gg_",
68
- "--transform": "--transform_1pxw8",
69
- "__SIndicators": "___SIndicators_1pxw8_gg_",
70
- "__SIndicator": "___SIndicator_1pxw8_gg_",
71
- "_active": "__active_1pxw8_gg_",
72
- "__SNext": "___SNext_1pxw8_gg_",
73
- "__SPrev": "___SPrev_1pxw8_gg_",
74
- "_disabled": "__disabled_1pxw8_gg_"
64
+ "__SCarousel": "___SCarousel_atk5n_gg_",
65
+ "__SContainer": "___SContainer_atk5n_gg_",
66
+ "--duration": "--duration_atk5n",
67
+ "__SItem": "___SItem_atk5n_gg_",
68
+ "--transform": "--transform_atk5n",
69
+ "__SIndicators": "___SIndicators_atk5n_gg_",
70
+ "__SIndicator": "___SIndicator_atk5n_gg_",
71
+ "_active": "__active_atk5n_gg_",
72
+ "__SNext": "___SNext_atk5n_gg_",
73
+ "__SPrev": "___SPrev_atk5n_gg_",
74
+ "_disabled": "__disabled_atk5n_gg_"
75
75
  });
76
76
  var position = {
77
77
  getItemMin: function getItemMin(items) {
package/lib/cjs/style/carousel.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SCarousel {
4
2
  overflow: hidden;
5
3
  outline: none;
@@ -15,31 +13,31 @@ SItem {
15
13
  max-width: 100%;
16
14
  box-sizing: border-box;
17
15
  transform: var(--transform);
18
- border-radius: 6px;
16
+ border-radius: var(--intergalactic-rounded-medium, 6px);
19
17
  overflow: hidden;
20
18
  }
21
19
 
22
20
  SIndicators {
23
21
  display: flex;
24
22
  justify-content: center;
25
- margin-top: 16px;
23
+ margin-top: var(--intergalactic-spacing-4x, 16px);
26
24
  }
27
25
 
28
26
  SIndicator {
29
- margin: 0 6px;
27
+ margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
30
28
  cursor: pointer;
31
29
  display: block;
32
30
  width: 12px;
33
31
  height: 12px;
34
- border-radius: 6px;
35
- background-color: var(--gray-300);
36
- opacity: 0.3;
32
+ border-radius: var(--intergalactic-rounded-medium, 6px);
33
+ background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
34
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
37
35
  object-fit: cover;
38
36
  transition: ease-in-out opacity 0.1s;
39
37
  }
40
38
 
41
39
  SIndicator:hover {
42
- opacity: 0.6;
40
+ opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.3));
43
41
  }
44
42
 
45
43
  SIndicator[active] {
@@ -55,15 +53,15 @@ SNext {
55
53
  }
56
54
 
57
55
  SPrev {
58
- margin-right: 12px;
56
+ margin-right: var(--intergalactic-spacing-3x, 12px);
59
57
  }
60
58
  SNext {
61
- margin-left: 12px;
59
+ margin-left: var(--intergalactic-spacing-3x, 12px);
62
60
  }
63
61
 
64
62
  SPrev[disabled],
65
63
  SNext[disabled] {
66
- opacity: var(--disabled-opacity);
64
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
67
65
  cursor: default;
68
66
  pointer-events: none;
69
67
  }
package/lib/es6/Carousel.js CHANGED
@@ -37,22 +37,22 @@ var style = (
37
37
  /*__reshadow_css_start__*/
38
38
  _sstyled.insert(
39
39
  /*__inner_css_start__*/
40
- ".___SCarousel_1pxw8_gg_{overflow:hidden;outline:none}.___SContainer_1pxw8_gg_{display:flex;transition:transform var(--duration_1pxw8) ease-in-out}.___SItem_1pxw8_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1pxw8);border-radius:6px;overflow:hidden}.___SIndicators_1pxw8_gg_{display:flex;justify-content:center;margin-top:16px}.___SIndicator_1pxw8_gg_{margin:0 6px;cursor:pointer;display:block;width:12px;height:12px;border-radius:6px;background-color:#a9abb6;opacity:.3;-o-object-fit:cover;object-fit:cover;transition:opacity .1s ease-in-out}.___SIndicator_1pxw8_gg_:hover{opacity:.6}.___SIndicator_1pxw8_gg_.__active_1pxw8_gg_{opacity:1}.___SNext_1pxw8_gg_,.___SPrev_1pxw8_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.___SPrev_1pxw8_gg_{margin-right:12px}.___SNext_1pxw8_gg_{margin-left:12px}.___SNext_1pxw8_gg_.__disabled_1pxw8_gg_,.___SPrev_1pxw8_gg_.__disabled_1pxw8_gg_{opacity:0.3;cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1pxw8_gg_{transition:none}}"
40
+ ".___SCarousel_atk5n_gg_{overflow:hidden;outline:none}.___SContainer_atk5n_gg_{display:flex;transition:transform var(--duration_atk5n) ease-in-out}.___SItem_atk5n_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_atk5n);border-radius:var(--intergalactic-rounded-medium,6px);overflow:hidden}.___SIndicators_atk5n_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x,16px)}.___SIndicator_atk5n_gg_{margin:0 calc(var(--intergalactic-spacing-3x, 12px)*0.5);cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-rounded-medium,6px);background-color:var(--intergalactic-icon-secondary-neutral,#a9abb6);opacity:var(--intergalactic-disabled-opacity,.3);-o-object-fit:cover;object-fit:cover;transition:opacity .1s ease-in-out}.___SIndicator_atk5n_gg_:hover{opacity:calc(var(--intergalactic-disabled-opacity, .3)*2)}.___SIndicator_atk5n_gg_.__active_atk5n_gg_{opacity:1}.___SNext_atk5n_gg_,.___SPrev_atk5n_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.___SPrev_atk5n_gg_{margin-right:var(--intergalactic-spacing-3x,12px)}.___SNext_atk5n_gg_{margin-left:var(--intergalactic-spacing-3x,12px)}.___SNext_atk5n_gg_.__disabled_atk5n_gg_,.___SPrev_atk5n_gg_.__disabled_atk5n_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_atk5n_gg_{transition:none}}"
41
41
  /*__inner_css_end__*/
42
- , "1pxw8_gg_")
42
+ , "atk5n_gg_")
43
43
  /*__reshadow_css_end__*/
44
44
  , {
45
- "__SCarousel": "___SCarousel_1pxw8_gg_",
46
- "__SContainer": "___SContainer_1pxw8_gg_",
47
- "--duration": "--duration_1pxw8",
48
- "__SItem": "___SItem_1pxw8_gg_",
49
- "--transform": "--transform_1pxw8",
50
- "__SIndicators": "___SIndicators_1pxw8_gg_",
51
- "__SIndicator": "___SIndicator_1pxw8_gg_",
52
- "_active": "__active_1pxw8_gg_",
53
- "__SNext": "___SNext_1pxw8_gg_",
54
- "__SPrev": "___SPrev_1pxw8_gg_",
55
- "_disabled": "__disabled_1pxw8_gg_"
45
+ "__SCarousel": "___SCarousel_atk5n_gg_",
46
+ "__SContainer": "___SContainer_atk5n_gg_",
47
+ "--duration": "--duration_atk5n",
48
+ "__SItem": "___SItem_atk5n_gg_",
49
+ "--transform": "--transform_atk5n",
50
+ "__SIndicators": "___SIndicators_atk5n_gg_",
51
+ "__SIndicator": "___SIndicator_atk5n_gg_",
52
+ "_active": "__active_atk5n_gg_",
53
+ "__SNext": "___SNext_atk5n_gg_",
54
+ "__SPrev": "___SPrev_atk5n_gg_",
55
+ "_disabled": "__disabled_atk5n_gg_"
56
56
  });
57
57
  var position = {
58
58
  getItemMin: function getItemMin(items) {
package/lib/es6/style/carousel.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SCarousel {
4
2
  overflow: hidden;
5
3
  outline: none;
@@ -15,31 +13,31 @@ SItem {
15
13
  max-width: 100%;
16
14
  box-sizing: border-box;
17
15
  transform: var(--transform);
18
- border-radius: 6px;
16
+ border-radius: var(--intergalactic-rounded-medium, 6px);
19
17
  overflow: hidden;
20
18
  }
21
19
 
22
20
  SIndicators {
23
21
  display: flex;
24
22
  justify-content: center;
25
- margin-top: 16px;
23
+ margin-top: var(--intergalactic-spacing-4x, 16px);
26
24
  }
27
25
 
28
26
  SIndicator {
29
- margin: 0 6px;
27
+ margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
30
28
  cursor: pointer;
31
29
  display: block;
32
30
  width: 12px;
33
31
  height: 12px;
34
- border-radius: 6px;
35
- background-color: var(--gray-300);
36
- opacity: 0.3;
32
+ border-radius: var(--intergalactic-rounded-medium, 6px);
33
+ background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
34
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
37
35
  object-fit: cover;
38
36
  transition: ease-in-out opacity 0.1s;
39
37
  }
40
38
 
41
39
  SIndicator:hover {
42
- opacity: 0.6;
40
+ opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.3));
43
41
  }
44
42
 
45
43
  SIndicator[active] {
@@ -55,15 +53,15 @@ SNext {
55
53
  }
56
54
 
57
55
  SPrev {
58
- margin-right: 12px;
56
+ margin-right: var(--intergalactic-spacing-3x, 12px);
59
57
  }
60
58
  SNext {
61
- margin-left: 12px;
59
+ margin-left: var(--intergalactic-spacing-3x, 12px);
62
60
  }
63
61
 
64
62
  SPrev[disabled],
65
63
  SNext[disabled] {
66
- opacity: var(--disabled-opacity);
64
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
67
65
  cursor: default;
68
66
  pointer-events: none;
69
67
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/carousel",
3
3
  "description": "Semrush Carousel Component",
4
- "version": "2.1.10",
4
+ "version": "2.2.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
package/src/style/carousel.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SCarousel {
4
2
  overflow: hidden;
5
3
  outline: none;
@@ -15,31 +13,31 @@ SItem {
15
13
  max-width: 100%;
16
14
  box-sizing: border-box;
17
15
  transform: var(--transform);
18
- border-radius: 6px;
16
+ border-radius: var(--intergalactic-rounded-medium, 6px);
19
17
  overflow: hidden;
20
18
  }
21
19
 
22
20
  SIndicators {
23
21
  display: flex;
24
22
  justify-content: center;
25
- margin-top: 16px;
23
+ margin-top: var(--intergalactic-spacing-4x, 16px);
26
24
  }
27
25
 
28
26
  SIndicator {
29
- margin: 0 6px;
27
+ margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
30
28
  cursor: pointer;
31
29
  display: block;
32
30
  width: 12px;
33
31
  height: 12px;
34
- border-radius: 6px;
35
- background-color: var(--gray-300);
36
- opacity: 0.3;
32
+ border-radius: var(--intergalactic-rounded-medium, 6px);
33
+ background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
34
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
37
35
  object-fit: cover;
38
36
  transition: ease-in-out opacity 0.1s;
39
37
  }
40
38
 
41
39
  SIndicator:hover {
42
- opacity: 0.6;
40
+ opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.3));
43
41
  }
44
42
 
45
43
  SIndicator[active] {
@@ -55,15 +53,15 @@ SNext {
55
53
  }
56
54
 
57
55
  SPrev {
58
- margin-right: 12px;
56
+ margin-right: var(--intergalactic-spacing-3x, 12px);
59
57
  }
60
58
  SNext {
61
- margin-left: 12px;
59
+ margin-left: var(--intergalactic-spacing-3x, 12px);
62
60
  }
63
61
 
64
62
  SPrev[disabled],
65
63
  SNext[disabled] {
66
- opacity: var(--disabled-opacity);
64
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
67
65
  cursor: default;
68
66
  pointer-events: none;
69
67
  }