@semcore/dropdown-menu 3.4.2 → 3.5.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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/DropdownMenu.js +21 -21
  3. package/lib/cjs/style/dropdown-menu.shadow.css +18 -19
  4. package/lib/cjs/style/scroll-area.shadow.css +34 -10
  5. package/lib/es6/DropdownMenu.js +21 -21
  6. package/lib/es6/style/dropdown-menu.shadow.css +18 -19
  7. package/lib/es6/style/scroll-area.shadow.css +34 -10
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.5.0] - 2022-12-12
6
+
7
+ ### Added
8
+
9
+ - Design tokens based theming.
10
+
5
11
  ## [3.4.2] - 2022-12-01
6
12
 
7
13
  ### Changed
package/lib/cjs/DropdownMenu.js CHANGED
@@ -63,23 +63,23 @@ var style = (
63
63
  /*__reshadow_css_start__*/
64
64
  _core.sstyled.insert(
65
65
  /*__inner_css_start__*/
66
- ".___SDropdownMenuList_1f4am_gg_{max-height:240px;padding:4px 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1f4am_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_1f4am_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_1f4am_gg_:focus{outline:none}.___SDropdownMenuItem_1f4am_gg_.__highlighted_1f4am_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3) inset}.___SDropdownMenuItem_1f4am_gg_.__selected_1f4am_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_1f4am_gg_.__selected_1f4am_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_1f4am_gg_.__disabled_1f4am_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1f4am_gg_._size_l_1f4am_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_1f4am_gg_._size_m_1f4am_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1f4am_gg_.__notInteractive_1f4am_gg_{cursor:default}.___SDropdownMenuItem_1f4am_gg_.__notInteractive_1f4am_gg_:hover{background:none}.___SDropdownMenuItem_1f4am_gg_._variant_hint_1f4am_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_1f4am_gg_._variant_hint_1f4am_gg_:hover{background:none}.___SDropdownMenuItem_1f4am_gg_._variant_title_1f4am_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1f4am_gg_._variant_title_1f4am_gg_:hover{background:none}.___SDropdownMenuItemAddon_1f4am_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1f4am_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1f4am_gg_:last-child{margin-right:0}.___SPopper_1f4am_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}"
66
+ ".___SDropdownMenuList_v64s0_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x,4px) 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_v64s0_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_v64s0_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover,#f4f5f9)}.___SDropdownMenuItem_v64s0_gg_:focus{outline:none}.___SDropdownMenuItem_v64s0_gg_.__highlighted_v64s0_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3)) inset}.___SDropdownMenuItem_v64s0_gg_.__selected_v64s0_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,rgba(196,229,254,.7))}.___SDropdownMenuItem_v64s0_gg_.__selected_v64s0_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,#c4e5fe)}.___SDropdownMenuItem_v64s0_gg_.__disabled_v64s0_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_v64s0_gg_._size_l_v64s0_gg_{font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%);padding:var(--intergalactic-spacing-2x,8px) var(--intergalactic-spacing-3x,12px);min-height:40px}.___SDropdownMenuItem_v64s0_gg_._size_m_v64s0_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x,8px);min-height:32px}.___SDropdownMenuItem_v64s0_gg_.__notInteractive_v64s0_gg_{cursor:default}.___SDropdownMenuItem_v64s0_gg_.__notInteractive_v64s0_gg_:hover{background:none}.___SDropdownMenuItem_v64s0_gg_._variant_hint_v64s0_gg_{color:var(--intergalactic-text-secondary,#6c6e79);cursor:default}.___SDropdownMenuItem_v64s0_gg_._variant_hint_v64s0_gg_:hover{background:none}.___SDropdownMenuItem_v64s0_gg_._variant_title_v64s0_gg_{font-weight:var(--intergalactic-bold,700);cursor:default}.___SDropdownMenuItem_v64s0_gg_._variant_title_v64s0_gg_:hover{background:none}.___SDropdownMenuItemAddon_v64s0_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SDropdownMenuItemAddon_v64s0_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_v64s0_gg_:last-child{margin-right:0}.___SPopper_v64s0_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}"
67
67
  /*__inner_css_end__*/
68
- , "1f4am_gg_")
68
+ , "v64s0_gg_")
69
69
  /*__reshadow_css_end__*/
70
70
  , {
71
- "__SDropdownMenuList": "___SDropdownMenuList_1f4am_gg_",
72
- "__SDropdownMenuItem": "___SDropdownMenuItem_1f4am_gg_",
73
- "_highlighted": "__highlighted_1f4am_gg_",
74
- "_selected": "__selected_1f4am_gg_",
75
- "_disabled": "__disabled_1f4am_gg_",
76
- "_size_l": "_size_l_1f4am_gg_",
77
- "_size_m": "_size_m_1f4am_gg_",
78
- "_notInteractive": "__notInteractive_1f4am_gg_",
79
- "_variant_hint": "_variant_hint_1f4am_gg_",
80
- "_variant_title": "_variant_title_1f4am_gg_",
81
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1f4am_gg_",
82
- "__SPopper": "___SPopper_1f4am_gg_"
71
+ "__SDropdownMenuList": "___SDropdownMenuList_v64s0_gg_",
72
+ "__SDropdownMenuItem": "___SDropdownMenuItem_v64s0_gg_",
73
+ "_highlighted": "__highlighted_v64s0_gg_",
74
+ "_selected": "__selected_v64s0_gg_",
75
+ "_disabled": "__disabled_v64s0_gg_",
76
+ "_size_l": "_size_l_v64s0_gg_",
77
+ "_size_m": "_size_m_v64s0_gg_",
78
+ "_notInteractive": "__notInteractive_v64s0_gg_",
79
+ "_variant_hint": "_variant_hint_v64s0_gg_",
80
+ "_variant_title": "_variant_title_v64s0_gg_",
81
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_v64s0_gg_",
82
+ "__SPopper": "___SPopper_v64s0_gg_"
83
83
  });
84
84
 
85
85
  /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
@@ -87,16 +87,16 @@ var scrollStyles = (
87
87
  /*__reshadow_css_start__*/
88
88
  _core.sstyled.insert(
89
89
  /*__inner_css_start__*/
90
- ".___SShadowHorizontal_16hkc_gg_:after,.___SShadowHorizontal_16hkc_gg_:before{width:16px;height:100%;border-radius:6px}.___SShadowHorizontal_16hkc_gg_._position_median_16hkc_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_median_16hkc_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_start_16hkc_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_end_16hkc_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_:after,.___SShadowVertical_16hkc_gg_:before{width:100%;height:16px;border-radius:6px}.___SShadowVertical_16hkc_gg_._position_median_16hkc_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_median_16hkc_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_start_16hkc_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_end_16hkc_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}"
90
+ ".___SShadowHorizontal_sl6d2_gg_:after,.___SShadowHorizontal_sl6d2_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-rounded-medium,6px)}.___SShadowHorizontal_sl6d2_gg_._position_median_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_median_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_start_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_end_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_:after,.___SShadowVertical_sl6d2_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-rounded-medium,6px)}.___SShadowVertical_sl6d2_gg_._position_median_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_median_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_start_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_end_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0)))}"
91
91
  /*__inner_css_end__*/
92
- , "16hkc_gg_")
92
+ , "sl6d2_gg_")
93
93
  /*__reshadow_css_end__*/
94
94
  , {
95
- "__SShadowHorizontal": "___SShadowHorizontal_16hkc_gg_",
96
- "_position_median": "_position_median_16hkc_gg_",
97
- "_position_start": "_position_start_16hkc_gg_",
98
- "_position_end": "_position_end_16hkc_gg_",
99
- "__SShadowVertical": "___SShadowVertical_16hkc_gg_"
95
+ "__SShadowHorizontal": "___SShadowHorizontal_sl6d2_gg_",
96
+ "_position_median": "_position_median_sl6d2_gg_",
97
+ "_position_start": "_position_start_sl6d2_gg_",
98
+ "_position_end": "_position_end_sl6d2_gg_",
99
+ "__SShadowVertical": "___SShadowVertical_sl6d2_gg_"
100
100
  });
101
101
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
102
102
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
package/lib/cjs/style/dropdown-menu.shadow.css CHANGED
@@ -1,8 +1,6 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SDropdownMenuList {
4
2
  max-height: 240px;
5
- padding: 4px 0;
3
+ padding: var(--intergalactic-spacing-1x, 4px) 0;
6
4
  position: relative;
7
5
  min-height: 26px;
8
6
  min-width: 32px;
@@ -20,7 +18,7 @@ SDropdownMenuItem {
20
18
  line-height: normal;
21
19
 
22
20
  &:hover {
23
- background-color: var(--gray-50);
21
+ background-color: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
24
22
  }
25
23
 
26
24
  &:focus {
@@ -30,34 +28,35 @@ SDropdownMenuItem {
30
28
 
31
29
  SDropdownMenuItem[highlighted] {
32
30
  z-index: 1;
33
- box-shadow: var(--keyboard-focus) inset;
31
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3)) inset;
34
32
  }
35
33
 
36
34
  SDropdownMenuItem[selected] {
37
- background-color: color-mod(var(--blue-100) a(70%));
35
+ background-color: var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));
38
36
 
39
37
  &:hover {
40
- background-color: var(--blue-100);
38
+ background-color: var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe);
41
39
  }
42
40
  }
43
41
 
44
42
  SDropdownMenuItem[disabled] {
45
- opacity: var(--disabled-opacity);
43
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
46
44
  cursor: default;
47
45
  pointer-events: none;
48
46
  }
49
47
 
50
48
  SDropdownMenuItem[size='l'] {
51
- font-size: var(--fs-300);
52
- line-height: var(--lh-300);
53
- padding: 8px 12px;
49
+ font-size: var(--intergalactic-fs-300, 16px);
50
+ line-height: var(--intergalactic-lh-300, 150%);
51
+ padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
54
52
  min-height: 40px;
55
53
  }
56
54
 
57
55
  SDropdownMenuItem[size='m'] {
58
- font-size: var(--fs-200);
59
- line-height: var(--lh-200);
60
- padding: 6px 8px;
56
+ font-size: var(--intergalactic-fs-200, 14px);
57
+ line-height: var(--intergalactic-lh-200, 142%);
58
+ padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))
59
+ var(--intergalactic-spacing-2x, 8px);
61
60
  min-height: 32px;
62
61
  }
63
62
 
@@ -70,7 +69,7 @@ SDropdownMenuItem[notInteractive] {
70
69
  }
71
70
 
72
71
  SDropdownMenuItem[variant='hint'] {
73
- color: var(--gray-500);
72
+ color: var(--intergalactic-text-secondary, #6c6e79);
74
73
  cursor: default;
75
74
 
76
75
  &:hover {
@@ -79,7 +78,7 @@ SDropdownMenuItem[variant='hint'] {
79
78
  }
80
79
 
81
80
  SDropdownMenuItem[variant='title'] {
82
- font-weight: bold;
81
+ font-weight: var(--intergalactic-bold, 700);
83
82
  cursor: default;
84
83
 
85
84
  &:hover {
@@ -89,8 +88,8 @@ SDropdownMenuItem[variant='title'] {
89
88
 
90
89
  SDropdownMenuItemAddon {
91
90
  display: inline-flex;
92
- margin-left: 8px;
93
- margin-right: 8px;
91
+ margin-left: var(--intergalactic-spacing-2x, 8px);
92
+ margin-right: var(--intergalactic-spacing-2x, 8px);
94
93
 
95
94
  &:first-child {
96
95
  margin-left: 0;
@@ -103,6 +102,6 @@ SDropdownMenuItemAddon {
103
102
 
104
103
  SPopper {
105
104
  &:focus {
106
- box-shadow: var(--keyboard-focus);
105
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
107
106
  }
108
107
  }
package/lib/cjs/style/scroll-area.shadow.css CHANGED
@@ -3,29 +3,41 @@ SShadowHorizontal {
3
3
  &:after {
4
4
  width: 16px;
5
5
  height: 100%;
6
- border-radius: 6px;
6
+ border-radius: var(--intergalactic-rounded-medium, 6px);
7
7
  }
8
8
  }
9
9
 
10
10
  SShadowHorizontal[position='median'] {
11
11
  &:before {
12
- background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
12
+ background: var(
13
+ --intergalactic-scroll-area-dropdown-menu-left,
14
+ linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
15
+ );
13
16
  }
14
17
 
15
18
  &:after {
16
- background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
19
+ background: var(
20
+ --intergalactic-scroll-area-dropdown-menu-right,
21
+ linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
22
+ );
17
23
  }
18
24
  }
19
25
 
20
26
  SShadowHorizontal[position='start'] {
21
27
  &:before {
22
- background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
28
+ background: var(
29
+ --intergalactic-scroll-area-dropdown-menu-left,
30
+ linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
31
+ );
23
32
  }
24
33
  }
25
34
 
26
35
  SShadowHorizontal[position='end'] {
27
36
  &:after {
28
- background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
37
+ background: var(
38
+ --intergalactic-scroll-area-dropdown-menu-right,
39
+ linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
40
+ );
29
41
  }
30
42
  }
31
43
 
@@ -34,28 +46,40 @@ SShadowVertical {
34
46
  &:after {
35
47
  width: 100%;
36
48
  height: 16px;
37
- border-radius: 6px;
49
+ border-radius: var(--intergalactic-rounded-medium, 6px);
38
50
  }
39
51
  }
40
52
 
41
53
  SShadowVertical[position='median'] {
42
54
  &:before {
43
- background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
55
+ background: var(
56
+ --intergalactic-scroll-area-dropdown-menu-top,
57
+ linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
58
+ );
44
59
  }
45
60
 
46
61
  &:after {
47
- background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
62
+ background: var(
63
+ --intergalactic-scroll-area-dropdown-menu-bottom,
64
+ linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
65
+ );
48
66
  }
49
67
  }
50
68
 
51
69
  SShadowVertical[position='start'] {
52
70
  &:before {
53
- background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
71
+ background: var(
72
+ --intergalactic-scroll-area-dropdown-menu-top,
73
+ linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
74
+ );
54
75
  }
55
76
  }
56
77
 
57
78
  SShadowVertical[position='end'] {
58
79
  &:after {
59
- background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
80
+ background: var(
81
+ --intergalactic-scroll-area-dropdown-menu-bottom,
82
+ linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
83
+ );
60
84
  }
61
85
  }
package/lib/es6/DropdownMenu.js CHANGED
@@ -40,23 +40,23 @@ var style = (
40
40
  /*__reshadow_css_start__*/
41
41
  _sstyled.insert(
42
42
  /*__inner_css_start__*/
43
- ".___SDropdownMenuList_1f4am_gg_{max-height:240px;padding:4px 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_1f4am_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_1f4am_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_1f4am_gg_:focus{outline:none}.___SDropdownMenuItem_1f4am_gg_.__highlighted_1f4am_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3) inset}.___SDropdownMenuItem_1f4am_gg_.__selected_1f4am_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_1f4am_gg_.__selected_1f4am_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_1f4am_gg_.__disabled_1f4am_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_1f4am_gg_._size_l_1f4am_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_1f4am_gg_._size_m_1f4am_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_1f4am_gg_.__notInteractive_1f4am_gg_{cursor:default}.___SDropdownMenuItem_1f4am_gg_.__notInteractive_1f4am_gg_:hover{background:none}.___SDropdownMenuItem_1f4am_gg_._variant_hint_1f4am_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_1f4am_gg_._variant_hint_1f4am_gg_:hover{background:none}.___SDropdownMenuItem_1f4am_gg_._variant_title_1f4am_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_1f4am_gg_._variant_title_1f4am_gg_:hover{background:none}.___SDropdownMenuItemAddon_1f4am_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_1f4am_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1f4am_gg_:last-child{margin-right:0}.___SPopper_1f4am_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}"
43
+ ".___SDropdownMenuList_v64s0_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x,4px) 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_v64s0_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_v64s0_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover,#f4f5f9)}.___SDropdownMenuItem_v64s0_gg_:focus{outline:none}.___SDropdownMenuItem_v64s0_gg_.__highlighted_v64s0_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3)) inset}.___SDropdownMenuItem_v64s0_gg_.__selected_v64s0_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,rgba(196,229,254,.7))}.___SDropdownMenuItem_v64s0_gg_.__selected_v64s0_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,#c4e5fe)}.___SDropdownMenuItem_v64s0_gg_.__disabled_v64s0_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_v64s0_gg_._size_l_v64s0_gg_{font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%);padding:var(--intergalactic-spacing-2x,8px) var(--intergalactic-spacing-3x,12px);min-height:40px}.___SDropdownMenuItem_v64s0_gg_._size_m_v64s0_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x,8px);min-height:32px}.___SDropdownMenuItem_v64s0_gg_.__notInteractive_v64s0_gg_{cursor:default}.___SDropdownMenuItem_v64s0_gg_.__notInteractive_v64s0_gg_:hover{background:none}.___SDropdownMenuItem_v64s0_gg_._variant_hint_v64s0_gg_{color:var(--intergalactic-text-secondary,#6c6e79);cursor:default}.___SDropdownMenuItem_v64s0_gg_._variant_hint_v64s0_gg_:hover{background:none}.___SDropdownMenuItem_v64s0_gg_._variant_title_v64s0_gg_{font-weight:var(--intergalactic-bold,700);cursor:default}.___SDropdownMenuItem_v64s0_gg_._variant_title_v64s0_gg_:hover{background:none}.___SDropdownMenuItemAddon_v64s0_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SDropdownMenuItemAddon_v64s0_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_v64s0_gg_:last-child{margin-right:0}.___SPopper_v64s0_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}"
44
44
  /*__inner_css_end__*/
45
- , "1f4am_gg_")
45
+ , "v64s0_gg_")
46
46
  /*__reshadow_css_end__*/
47
47
  , {
48
- "__SDropdownMenuList": "___SDropdownMenuList_1f4am_gg_",
49
- "__SDropdownMenuItem": "___SDropdownMenuItem_1f4am_gg_",
50
- "_highlighted": "__highlighted_1f4am_gg_",
51
- "_selected": "__selected_1f4am_gg_",
52
- "_disabled": "__disabled_1f4am_gg_",
53
- "_size_l": "_size_l_1f4am_gg_",
54
- "_size_m": "_size_m_1f4am_gg_",
55
- "_notInteractive": "__notInteractive_1f4am_gg_",
56
- "_variant_hint": "_variant_hint_1f4am_gg_",
57
- "_variant_title": "_variant_title_1f4am_gg_",
58
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1f4am_gg_",
59
- "__SPopper": "___SPopper_1f4am_gg_"
48
+ "__SDropdownMenuList": "___SDropdownMenuList_v64s0_gg_",
49
+ "__SDropdownMenuItem": "___SDropdownMenuItem_v64s0_gg_",
50
+ "_highlighted": "__highlighted_v64s0_gg_",
51
+ "_selected": "__selected_v64s0_gg_",
52
+ "_disabled": "__disabled_v64s0_gg_",
53
+ "_size_l": "_size_l_v64s0_gg_",
54
+ "_size_m": "_size_m_v64s0_gg_",
55
+ "_notInteractive": "__notInteractive_v64s0_gg_",
56
+ "_variant_hint": "_variant_hint_v64s0_gg_",
57
+ "_variant_title": "_variant_title_v64s0_gg_",
58
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_v64s0_gg_",
59
+ "__SPopper": "___SPopper_v64s0_gg_"
60
60
  });
61
61
 
62
62
  /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
@@ -64,16 +64,16 @@ var scrollStyles = (
64
64
  /*__reshadow_css_start__*/
65
65
  _sstyled2.insert(
66
66
  /*__inner_css_start__*/
67
- ".___SShadowHorizontal_16hkc_gg_:after,.___SShadowHorizontal_16hkc_gg_:before{width:16px;height:100%;border-radius:6px}.___SShadowHorizontal_16hkc_gg_._position_median_16hkc_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_median_16hkc_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_start_16hkc_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_16hkc_gg_._position_end_16hkc_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_:after,.___SShadowVertical_16hkc_gg_:before{width:100%;height:16px;border-radius:6px}.___SShadowVertical_16hkc_gg_._position_median_16hkc_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_median_16hkc_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_start_16hkc_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_16hkc_gg_._position_end_16hkc_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}"
67
+ ".___SShadowHorizontal_sl6d2_gg_:after,.___SShadowHorizontal_sl6d2_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-rounded-medium,6px)}.___SShadowHorizontal_sl6d2_gg_._position_median_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_median_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_start_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowHorizontal_sl6d2_gg_._position_end_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_:after,.___SShadowVertical_sl6d2_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-rounded-medium,6px)}.___SShadowVertical_sl6d2_gg_._position_median_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_median_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_start_sl6d2_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0)))}.___SShadowVertical_sl6d2_gg_._position_end_sl6d2_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0)))}"
68
68
  /*__inner_css_end__*/
69
- , "16hkc_gg_")
69
+ , "sl6d2_gg_")
70
70
  /*__reshadow_css_end__*/
71
71
  , {
72
- "__SShadowHorizontal": "___SShadowHorizontal_16hkc_gg_",
73
- "_position_median": "_position_median_16hkc_gg_",
74
- "_position_start": "_position_start_16hkc_gg_",
75
- "_position_end": "_position_end_16hkc_gg_",
76
- "__SShadowVertical": "___SShadowVertical_16hkc_gg_"
72
+ "__SShadowHorizontal": "___SShadowHorizontal_sl6d2_gg_",
73
+ "_position_median": "_position_median_sl6d2_gg_",
74
+ "_position_start": "_position_start_sl6d2_gg_",
75
+ "_position_end": "_position_end_sl6d2_gg_",
76
+ "__SShadowVertical": "___SShadowVertical_sl6d2_gg_"
77
77
  });
78
78
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
79
79
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
package/lib/es6/style/dropdown-menu.shadow.css CHANGED
@@ -1,8 +1,6 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SDropdownMenuList {
4
2
  max-height: 240px;
5
- padding: 4px 0;
3
+ padding: var(--intergalactic-spacing-1x, 4px) 0;
6
4
  position: relative;
7
5
  min-height: 26px;
8
6
  min-width: 32px;
@@ -20,7 +18,7 @@ SDropdownMenuItem {
20
18
  line-height: normal;
21
19
 
22
20
  &:hover {
23
- background-color: var(--gray-50);
21
+ background-color: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
24
22
  }
25
23
 
26
24
  &:focus {
@@ -30,34 +28,35 @@ SDropdownMenuItem {
30
28
 
31
29
  SDropdownMenuItem[highlighted] {
32
30
  z-index: 1;
33
- box-shadow: var(--keyboard-focus) inset;
31
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3)) inset;
34
32
  }
35
33
 
36
34
  SDropdownMenuItem[selected] {
37
- background-color: color-mod(var(--blue-100) a(70%));
35
+ background-color: var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));
38
36
 
39
37
  &:hover {
40
- background-color: var(--blue-100);
38
+ background-color: var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe);
41
39
  }
42
40
  }
43
41
 
44
42
  SDropdownMenuItem[disabled] {
45
- opacity: var(--disabled-opacity);
43
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
46
44
  cursor: default;
47
45
  pointer-events: none;
48
46
  }
49
47
 
50
48
  SDropdownMenuItem[size='l'] {
51
- font-size: var(--fs-300);
52
- line-height: var(--lh-300);
53
- padding: 8px 12px;
49
+ font-size: var(--intergalactic-fs-300, 16px);
50
+ line-height: var(--intergalactic-lh-300, 150%);
51
+ padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
54
52
  min-height: 40px;
55
53
  }
56
54
 
57
55
  SDropdownMenuItem[size='m'] {
58
- font-size: var(--fs-200);
59
- line-height: var(--lh-200);
60
- padding: 6px 8px;
56
+ font-size: var(--intergalactic-fs-200, 14px);
57
+ line-height: var(--intergalactic-lh-200, 142%);
58
+ padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))
59
+ var(--intergalactic-spacing-2x, 8px);
61
60
  min-height: 32px;
62
61
  }
63
62
 
@@ -70,7 +69,7 @@ SDropdownMenuItem[notInteractive] {
70
69
  }
71
70
 
72
71
  SDropdownMenuItem[variant='hint'] {
73
- color: var(--gray-500);
72
+ color: var(--intergalactic-text-secondary, #6c6e79);
74
73
  cursor: default;
75
74
 
76
75
  &:hover {
@@ -79,7 +78,7 @@ SDropdownMenuItem[variant='hint'] {
79
78
  }
80
79
 
81
80
  SDropdownMenuItem[variant='title'] {
82
- font-weight: bold;
81
+ font-weight: var(--intergalactic-bold, 700);
83
82
  cursor: default;
84
83
 
85
84
  &:hover {
@@ -89,8 +88,8 @@ SDropdownMenuItem[variant='title'] {
89
88
 
90
89
  SDropdownMenuItemAddon {
91
90
  display: inline-flex;
92
- margin-left: 8px;
93
- margin-right: 8px;
91
+ margin-left: var(--intergalactic-spacing-2x, 8px);
92
+ margin-right: var(--intergalactic-spacing-2x, 8px);
94
93
 
95
94
  &:first-child {
96
95
  margin-left: 0;
@@ -103,6 +102,6 @@ SDropdownMenuItemAddon {
103
102
 
104
103
  SPopper {
105
104
  &:focus {
106
- box-shadow: var(--keyboard-focus);
105
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
107
106
  }
108
107
  }
package/lib/es6/style/scroll-area.shadow.css CHANGED
@@ -3,29 +3,41 @@ SShadowHorizontal {
3
3
  &:after {
4
4
  width: 16px;
5
5
  height: 100%;
6
- border-radius: 6px;
6
+ border-radius: var(--intergalactic-rounded-medium, 6px);
7
7
  }
8
8
  }
9
9
 
10
10
  SShadowHorizontal[position='median'] {
11
11
  &:before {
12
- background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
12
+ background: var(
13
+ --intergalactic-scroll-area-dropdown-menu-left,
14
+ linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
15
+ );
13
16
  }
14
17
 
15
18
  &:after {
16
- background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
19
+ background: var(
20
+ --intergalactic-scroll-area-dropdown-menu-right,
21
+ linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
22
+ );
17
23
  }
18
24
  }
19
25
 
20
26
  SShadowHorizontal[position='start'] {
21
27
  &:before {
22
- background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
28
+ background: var(
29
+ --intergalactic-scroll-area-dropdown-menu-left,
30
+ linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
31
+ );
23
32
  }
24
33
  }
25
34
 
26
35
  SShadowHorizontal[position='end'] {
27
36
  &:after {
28
- background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
37
+ background: var(
38
+ --intergalactic-scroll-area-dropdown-menu-right,
39
+ linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
40
+ );
29
41
  }
30
42
  }
31
43
 
@@ -34,28 +46,40 @@ SShadowVertical {
34
46
  &:after {
35
47
  width: 100%;
36
48
  height: 16px;
37
- border-radius: 6px;
49
+ border-radius: var(--intergalactic-rounded-medium, 6px);
38
50
  }
39
51
  }
40
52
 
41
53
  SShadowVertical[position='median'] {
42
54
  &:before {
43
- background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
55
+ background: var(
56
+ --intergalactic-scroll-area-dropdown-menu-top,
57
+ linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
58
+ );
44
59
  }
45
60
 
46
61
  &:after {
47
- background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
62
+ background: var(
63
+ --intergalactic-scroll-area-dropdown-menu-bottom,
64
+ linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
65
+ );
48
66
  }
49
67
  }
50
68
 
51
69
  SShadowVertical[position='start'] {
52
70
  &:before {
53
- background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
71
+ background: var(
72
+ --intergalactic-scroll-area-dropdown-menu-top,
73
+ linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
74
+ );
54
75
  }
55
76
  }
56
77
 
57
78
  SShadowVertical[position='end'] {
58
79
  &:after {
59
- background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
80
+ background: var(
81
+ --intergalactic-scroll-area-dropdown-menu-bottom,
82
+ linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
83
+ );
60
84
  }
61
85
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/dropdown-menu",
3
3
  "description": "Semrush DropdownMenu Component",
4
- "version": "3.4.2",
4
+ "version": "3.5.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",