@semcore/pills 4.3.5 → 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/Pills.js +14 -14
  3. package/lib/cjs/style/pills.shadow.css +32 -32
  4. package/lib/es6/Pills.js +14 -14
  5. package/lib/es6/style/pills.shadow.css +32 -32
  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.5] - 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/flex-box` [4.6.3 ~> 4.6.4], `@semcore/neighbor-location` [3.1.3 ~> 3.1.4], `@semcore/utils` [3.40.0 ~> 3.41.0]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [4.3.4] - 2022-11-25
12
12
 
package/lib/cjs/Pills.js CHANGED
@@ -52,23 +52,23 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SPills_69vpi_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate}.___SPill_69vpi_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_69vpi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_69vpi_gg_:active,.___SPill_69vpi_gg_:focus,.___SPill_69vpi_gg_:hover{outline:0;text-decoration:none}.___SPill_69vpi_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_69vpi_gg_.__selected_69vpi_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_69vpi_gg_.__disabled_69vpi_gg_{cursor:default;pointer-events:none}.___SPill_69vpi_gg_.__disabled_69vpi_gg_>*{opacity:0.3}.___SPill_69vpi_gg_.__keyboardFocused_69vpi_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_69vpi_gg_{color:#191b23;display:inline-flex}.___SAddon_69vpi_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_69vpi_gg_._size_m_69vpi_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SText_69vpi_gg_{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_l_69vpi_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SText_69vpi_gg_{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SText_69vpi_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_69vpi_gg_._neighborLocation_right_69vpi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_69vpi_gg_._neighborLocation_both_69vpi_gg_{border-radius:0;margin-left:-1px}.___SPill_69vpi_gg_._neighborLocation_left_69vpi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
55
+ ".___SPills_e48rr_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate}.___SPill_e48rr_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,#fff);border:1px solid var(--intergalactic-border-primary,#c4c7cf);border-radius:var(--intergalactic-rounded-medium,6px)}.___SPill_e48rr_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_e48rr_gg_:active,.___SPill_e48rr_gg_:focus,.___SPill_e48rr_gg_:hover{outline:0;text-decoration:none}.___SPill_e48rr_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,#f4f5f9)}.___SPill_e48rr_gg_.__selected_e48rr_gg_{background:var(--intergalactic-control-secondary-info-hover,rgba(0,143,248,.2));border-color:var(--intergalactic-border-info-active,#006dca);z-index:1}.___SPill_e48rr_gg_.__disabled_e48rr_gg_{cursor:default;pointer-events:none}.___SPill_e48rr_gg_.__disabled_e48rr_gg_>*{opacity:var(--intergalactic-disabled-opacity,.3)}.___SPill_e48rr_gg_.__keyboardFocused_e48rr_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SText_e48rr_gg_{color:var(--intergalactic-text-primary,#191b23);display:inline-flex}.___SAddon_e48rr_gg_{color:var(--intergalactic-text-secondary,#6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_e48rr_gg_._size_m_e48rr_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SText_e48rr_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SText_e48rr_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SText_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._neighborLocation_right_e48rr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_e48rr_gg_._neighborLocation_both_e48rr_gg_{border-radius:0;margin-left:-1px}.___SPill_e48rr_gg_._neighborLocation_left_e48rr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
56
56
  /*__inner_css_end__*/
57
- , "69vpi_gg_")
57
+ , "e48rr_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SPills": "___SPills_69vpi_gg_",
61
- "__SPill": "___SPill_69vpi_gg_",
62
- "_selected": "__selected_69vpi_gg_",
63
- "_disabled": "__disabled_69vpi_gg_",
64
- "_keyboardFocused": "__keyboardFocused_69vpi_gg_",
65
- "__SText": "___SText_69vpi_gg_",
66
- "__SAddon": "___SAddon_69vpi_gg_",
67
- "_size_m": "_size_m_69vpi_gg_",
68
- "_size_l": "_size_l_69vpi_gg_",
69
- "_neighborLocation_right": "_neighborLocation_right_69vpi_gg_",
70
- "_neighborLocation_both": "_neighborLocation_both_69vpi_gg_",
71
- "_neighborLocation_left": "_neighborLocation_left_69vpi_gg_"
60
+ "__SPills": "___SPills_e48rr_gg_",
61
+ "__SPill": "___SPill_e48rr_gg_",
62
+ "_selected": "__selected_e48rr_gg_",
63
+ "_disabled": "__disabled_e48rr_gg_",
64
+ "_keyboardFocused": "__keyboardFocused_e48rr_gg_",
65
+ "__SText": "___SText_e48rr_gg_",
66
+ "__SAddon": "___SAddon_e48rr_gg_",
67
+ "_size_m": "_size_m_e48rr_gg_",
68
+ "_size_l": "_size_l_e48rr_gg_",
69
+ "_neighborLocation_right": "_neighborLocation_right_e48rr_gg_",
70
+ "_neighborLocation_both": "_neighborLocation_both_e48rr_gg_",
71
+ "_neighborLocation_left": "_neighborLocation_left_e48rr_gg_"
72
72
  });
73
73
 
74
74
  var RootPills = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/pills.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SPills {
4
2
  display: inline-flex;
5
3
  align-items: center;
@@ -29,9 +27,9 @@ SPill {
29
27
  vertical-align: middle;
30
28
  font-family: inherit;
31
29
  cursor: pointer;
32
- background: var(--white);
33
- border: 1px solid var(--gray-200);
34
- border-radius: var(--rounded-m);
30
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
31
+ border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
32
+ border-radius: var(--intergalactic-rounded-medium, 6px);
35
33
 
36
34
  &::-moz-focus-inner {
37
35
  border: none;
@@ -46,13 +44,13 @@ SPill {
46
44
  }
47
45
 
48
46
  &:hover {
49
- background: color-mod(var(--gray-400) a(20%));
47
+ background: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
50
48
  }
51
49
  }
52
50
 
53
51
  SPill[selected] {
54
- background: color-mod(var(--blue-400) a(20%));
55
- border-color: var(--blue-400);
52
+ background: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
53
+ border-color: var(--intergalactic-border-info-active, #006dca);
56
54
  z-index: 1;
57
55
  }
58
56
 
@@ -61,79 +59,79 @@ SPill[disabled] {
61
59
  pointer-events: none; /* Disable link interactions */
62
60
 
63
61
  & > * {
64
- opacity: var(--disabled-opacity);
62
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
65
63
  }
66
64
  }
67
65
 
68
66
  SPill[keyboardFocused] {
69
- box-shadow: var(--keyboard-focus);
67
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
70
68
  }
71
69
 
72
70
  SText {
73
- color: var(--gray-800);
71
+ color: var(--intergalactic-text-primary, #191b23);
74
72
  display: inline-flex;
75
73
  }
76
74
 
77
75
  SAddon {
78
- color: var(--gray-500);
76
+ color: var(--intergalactic-text-secondary, #6c6e79);
79
77
  display: inline-flex;
80
78
  align-items: center;
81
79
  justify-content: center;
82
80
  }
83
81
 
84
82
  SPill[size='m'] {
85
- height: var(--form-control-m);
86
- min-width: var(--form-control-m);
87
- font-size: var(--fs-200);
83
+ height: var(--intergalactic-form-control-m, 28px);
84
+ min-width: var(--intergalactic-form-control-m, 28px);
85
+ font-size: var(--intergalactic-fs-200, 14px);
88
86
 
89
87
  & SText {
90
- margin-left: 8px;
91
- margin-right: 8px;
88
+ margin-left: var(--intergalactic-spacing-2x, 8px);
89
+ margin-right: var(--intergalactic-spacing-2x, 8px);
92
90
  }
93
91
 
94
92
  & SAddon {
95
93
  &:not(:only-child):first-child {
96
- margin-left: 8px;
94
+ margin-left: var(--intergalactic-spacing-2x, 8px);
97
95
  }
98
96
 
99
97
  &:not(:only-child):last-child {
100
- margin-right: 8px;
98
+ margin-right: var(--intergalactic-spacing-2x, 8px);
101
99
  }
102
100
 
103
101
  &:only-child {
104
- margin-left: 8px;
105
- margin-right: 8px;
102
+ margin-left: var(--intergalactic-spacing-2x, 8px);
103
+ margin-right: var(--intergalactic-spacing-2x, 8px);
106
104
  }
107
105
  }
108
106
  }
109
107
 
110
108
  SPill[size='l'] {
111
- height: var(--form-control-l);
112
- min-width: var(--form-control-l);
113
- font-size: var(--fs-300);
109
+ height: var(--intergalactic-form-control-l, 40px);
110
+ min-width: var(--intergalactic-form-control-l, 40px);
111
+ font-size: var(--intergalactic-fs-300, 16px);
114
112
 
115
113
  & SText {
116
- margin-left: 8px;
117
- margin-right: 8px;
114
+ margin-left: var(--intergalactic-spacing-2x, 8px);
115
+ margin-right: var(--intergalactic-spacing-2x, 8px);
118
116
 
119
117
  &:only-child {
120
- margin-left: 12px;
121
- margin-right: 12px;
118
+ margin-left: var(--intergalactic-spacing-3x, 12px);
119
+ margin-right: var(--intergalactic-spacing-3x, 12px);
122
120
  }
123
121
  }
124
122
 
125
123
  & SAddon {
126
124
  &:not(:only-child):first-child {
127
- margin-left: 12px;
125
+ margin-left: var(--intergalactic-spacing-3x, 12px);
128
126
  }
129
127
 
130
128
  &:not(:only-child):last-child {
131
- margin-right: 12px;
129
+ margin-right: var(--intergalactic-spacing-3x, 12px);
132
130
  }
133
131
 
134
132
  &:only-child {
135
- margin-left: 12px;
136
- margin-right: 12px;
133
+ margin-left: var(--intergalactic-spacing-3x, 12px);
134
+ margin-right: var(--intergalactic-spacing-3x, 12px);
137
135
  }
138
136
  }
139
137
  }
@@ -145,11 +143,13 @@ SPill[neighborLocation='right'] {
145
143
 
146
144
  SPill[neighborLocation='both'] {
147
145
  border-radius: 0;
146
+ /* disable-tokens-validator */
148
147
  margin-left: -1px;
149
148
  }
150
149
 
151
150
  SPill[neighborLocation='left'] {
152
151
  border-top-left-radius: 0;
153
152
  border-bottom-left-radius: 0;
153
+ /* disable-tokens-validator */
154
154
  margin-left: -1px;
155
155
  }
package/lib/es6/Pills.js CHANGED
@@ -31,23 +31,23 @@ var style = (
31
31
  /*__reshadow_css_start__*/
32
32
  _sstyled.insert(
33
33
  /*__inner_css_start__*/
34
- ".___SPills_69vpi_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate}.___SPill_69vpi_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_69vpi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_69vpi_gg_:active,.___SPill_69vpi_gg_:focus,.___SPill_69vpi_gg_:hover{outline:0;text-decoration:none}.___SPill_69vpi_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_69vpi_gg_.__selected_69vpi_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_69vpi_gg_.__disabled_69vpi_gg_{cursor:default;pointer-events:none}.___SPill_69vpi_gg_.__disabled_69vpi_gg_>*{opacity:0.3}.___SPill_69vpi_gg_.__keyboardFocused_69vpi_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_69vpi_gg_{color:#191b23;display:inline-flex}.___SAddon_69vpi_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_69vpi_gg_._size_m_69vpi_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SText_69vpi_gg_{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_69vpi_gg_._size_m_69vpi_gg_ .___SAddon_69vpi_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_l_69vpi_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SText_69vpi_gg_{margin-left:8px;margin-right:8px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SText_69vpi_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_69vpi_gg_._size_l_69vpi_gg_ .___SAddon_69vpi_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_69vpi_gg_._neighborLocation_right_69vpi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_69vpi_gg_._neighborLocation_both_69vpi_gg_{border-radius:0;margin-left:-1px}.___SPill_69vpi_gg_._neighborLocation_left_69vpi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
34
+ ".___SPills_e48rr_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate}.___SPill_e48rr_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,#fff);border:1px solid var(--intergalactic-border-primary,#c4c7cf);border-radius:var(--intergalactic-rounded-medium,6px)}.___SPill_e48rr_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_e48rr_gg_:active,.___SPill_e48rr_gg_:focus,.___SPill_e48rr_gg_:hover{outline:0;text-decoration:none}.___SPill_e48rr_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,#f4f5f9)}.___SPill_e48rr_gg_.__selected_e48rr_gg_{background:var(--intergalactic-control-secondary-info-hover,rgba(0,143,248,.2));border-color:var(--intergalactic-border-info-active,#006dca);z-index:1}.___SPill_e48rr_gg_.__disabled_e48rr_gg_{cursor:default;pointer-events:none}.___SPill_e48rr_gg_.__disabled_e48rr_gg_>*{opacity:var(--intergalactic-disabled-opacity,.3)}.___SPill_e48rr_gg_.__keyboardFocused_e48rr_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SText_e48rr_gg_{color:var(--intergalactic-text-primary,#191b23);display:inline-flex}.___SAddon_e48rr_gg_{color:var(--intergalactic-text-secondary,#6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_e48rr_gg_._size_m_e48rr_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SText_e48rr_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_m_e48rr_gg_ .___SAddon_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SText_e48rr_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SText_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._size_l_e48rr_gg_ .___SAddon_e48rr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_e48rr_gg_._neighborLocation_right_e48rr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_e48rr_gg_._neighborLocation_both_e48rr_gg_{border-radius:0;margin-left:-1px}.___SPill_e48rr_gg_._neighborLocation_left_e48rr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
35
35
  /*__inner_css_end__*/
36
- , "69vpi_gg_")
36
+ , "e48rr_gg_")
37
37
  /*__reshadow_css_end__*/
38
38
  , {
39
- "__SPills": "___SPills_69vpi_gg_",
40
- "__SPill": "___SPill_69vpi_gg_",
41
- "_selected": "__selected_69vpi_gg_",
42
- "_disabled": "__disabled_69vpi_gg_",
43
- "_keyboardFocused": "__keyboardFocused_69vpi_gg_",
44
- "__SText": "___SText_69vpi_gg_",
45
- "__SAddon": "___SAddon_69vpi_gg_",
46
- "_size_m": "_size_m_69vpi_gg_",
47
- "_size_l": "_size_l_69vpi_gg_",
48
- "_neighborLocation_right": "_neighborLocation_right_69vpi_gg_",
49
- "_neighborLocation_both": "_neighborLocation_both_69vpi_gg_",
50
- "_neighborLocation_left": "_neighborLocation_left_69vpi_gg_"
39
+ "__SPills": "___SPills_e48rr_gg_",
40
+ "__SPill": "___SPill_e48rr_gg_",
41
+ "_selected": "__selected_e48rr_gg_",
42
+ "_disabled": "__disabled_e48rr_gg_",
43
+ "_keyboardFocused": "__keyboardFocused_e48rr_gg_",
44
+ "__SText": "___SText_e48rr_gg_",
45
+ "__SAddon": "___SAddon_e48rr_gg_",
46
+ "_size_m": "_size_m_e48rr_gg_",
47
+ "_size_l": "_size_l_e48rr_gg_",
48
+ "_neighborLocation_right": "_neighborLocation_right_e48rr_gg_",
49
+ "_neighborLocation_both": "_neighborLocation_both_e48rr_gg_",
50
+ "_neighborLocation_left": "_neighborLocation_left_e48rr_gg_"
51
51
  });
52
52
 
53
53
  var RootPills = /*#__PURE__*/function (_Component) {
package/lib/es6/style/pills.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SPills {
4
2
  display: inline-flex;
5
3
  align-items: center;
@@ -29,9 +27,9 @@ SPill {
29
27
  vertical-align: middle;
30
28
  font-family: inherit;
31
29
  cursor: pointer;
32
- background: var(--white);
33
- border: 1px solid var(--gray-200);
34
- border-radius: var(--rounded-m);
30
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
31
+ border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
32
+ border-radius: var(--intergalactic-rounded-medium, 6px);
35
33
 
36
34
  &::-moz-focus-inner {
37
35
  border: none;
@@ -46,13 +44,13 @@ SPill {
46
44
  }
47
45
 
48
46
  &:hover {
49
- background: color-mod(var(--gray-400) a(20%));
47
+ background: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
50
48
  }
51
49
  }
52
50
 
53
51
  SPill[selected] {
54
- background: color-mod(var(--blue-400) a(20%));
55
- border-color: var(--blue-400);
52
+ background: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
53
+ border-color: var(--intergalactic-border-info-active, #006dca);
56
54
  z-index: 1;
57
55
  }
58
56
 
@@ -61,79 +59,79 @@ SPill[disabled] {
61
59
  pointer-events: none; /* Disable link interactions */
62
60
 
63
61
  & > * {
64
- opacity: var(--disabled-opacity);
62
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
65
63
  }
66
64
  }
67
65
 
68
66
  SPill[keyboardFocused] {
69
- box-shadow: var(--keyboard-focus);
67
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
70
68
  }
71
69
 
72
70
  SText {
73
- color: var(--gray-800);
71
+ color: var(--intergalactic-text-primary, #191b23);
74
72
  display: inline-flex;
75
73
  }
76
74
 
77
75
  SAddon {
78
- color: var(--gray-500);
76
+ color: var(--intergalactic-text-secondary, #6c6e79);
79
77
  display: inline-flex;
80
78
  align-items: center;
81
79
  justify-content: center;
82
80
  }
83
81
 
84
82
  SPill[size='m'] {
85
- height: var(--form-control-m);
86
- min-width: var(--form-control-m);
87
- font-size: var(--fs-200);
83
+ height: var(--intergalactic-form-control-m, 28px);
84
+ min-width: var(--intergalactic-form-control-m, 28px);
85
+ font-size: var(--intergalactic-fs-200, 14px);
88
86
 
89
87
  & SText {
90
- margin-left: 8px;
91
- margin-right: 8px;
88
+ margin-left: var(--intergalactic-spacing-2x, 8px);
89
+ margin-right: var(--intergalactic-spacing-2x, 8px);
92
90
  }
93
91
 
94
92
  & SAddon {
95
93
  &:not(:only-child):first-child {
96
- margin-left: 8px;
94
+ margin-left: var(--intergalactic-spacing-2x, 8px);
97
95
  }
98
96
 
99
97
  &:not(:only-child):last-child {
100
- margin-right: 8px;
98
+ margin-right: var(--intergalactic-spacing-2x, 8px);
101
99
  }
102
100
 
103
101
  &:only-child {
104
- margin-left: 8px;
105
- margin-right: 8px;
102
+ margin-left: var(--intergalactic-spacing-2x, 8px);
103
+ margin-right: var(--intergalactic-spacing-2x, 8px);
106
104
  }
107
105
  }
108
106
  }
109
107
 
110
108
  SPill[size='l'] {
111
- height: var(--form-control-l);
112
- min-width: var(--form-control-l);
113
- font-size: var(--fs-300);
109
+ height: var(--intergalactic-form-control-l, 40px);
110
+ min-width: var(--intergalactic-form-control-l, 40px);
111
+ font-size: var(--intergalactic-fs-300, 16px);
114
112
 
115
113
  & SText {
116
- margin-left: 8px;
117
- margin-right: 8px;
114
+ margin-left: var(--intergalactic-spacing-2x, 8px);
115
+ margin-right: var(--intergalactic-spacing-2x, 8px);
118
116
 
119
117
  &:only-child {
120
- margin-left: 12px;
121
- margin-right: 12px;
118
+ margin-left: var(--intergalactic-spacing-3x, 12px);
119
+ margin-right: var(--intergalactic-spacing-3x, 12px);
122
120
  }
123
121
  }
124
122
 
125
123
  & SAddon {
126
124
  &:not(:only-child):first-child {
127
- margin-left: 12px;
125
+ margin-left: var(--intergalactic-spacing-3x, 12px);
128
126
  }
129
127
 
130
128
  &:not(:only-child):last-child {
131
- margin-right: 12px;
129
+ margin-right: var(--intergalactic-spacing-3x, 12px);
132
130
  }
133
131
 
134
132
  &:only-child {
135
- margin-left: 12px;
136
- margin-right: 12px;
133
+ margin-left: var(--intergalactic-spacing-3x, 12px);
134
+ margin-right: var(--intergalactic-spacing-3x, 12px);
137
135
  }
138
136
  }
139
137
  }
@@ -145,11 +143,13 @@ SPill[neighborLocation='right'] {
145
143
 
146
144
  SPill[neighborLocation='both'] {
147
145
  border-radius: 0;
146
+ /* disable-tokens-validator */
148
147
  margin-left: -1px;
149
148
  }
150
149
 
151
150
  SPill[neighborLocation='left'] {
152
151
  border-top-left-radius: 0;
153
152
  border-bottom-left-radius: 0;
153
+ /* disable-tokens-validator */
154
154
  margin-left: -1px;
155
155
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/pills",
3
3
  "description": "Semrush Pills Component",
4
- "version": "4.3.5",
4
+ "version": "4.4.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",