emoji-picker-react 4.12.0 → 4.12.2
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.
- package/dist/emoji-picker-react.cjs.development.js +24 -27
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +24 -27
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx +12 -2
- package/src/components/header/SkinTonePicker/SkinTonePicker.tsx +2 -21
- package/src/components/main/PickerMain.tsx +10 -4
package/package.json
CHANGED
|
@@ -32,7 +32,6 @@ export function BtnSkinToneVariation({
|
|
|
32
32
|
!isOpen && styles.closedTone,
|
|
33
33
|
isActive && styles.active
|
|
34
34
|
)}
|
|
35
|
-
tabIndex={isOpen ? 0 : -1}
|
|
36
35
|
aria-pressed={isActive}
|
|
37
36
|
aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]}`}
|
|
38
37
|
></Button>
|
|
@@ -51,8 +50,19 @@ const styles = stylesheet.create({
|
|
|
51
50
|
},
|
|
52
51
|
tone: {
|
|
53
52
|
'.': 'epr-tone',
|
|
53
|
+
width: 'var(--epr-skin-tone-size)',
|
|
54
|
+
display: 'block',
|
|
55
|
+
cursor: 'pointer',
|
|
56
|
+
borderRadius: '4px',
|
|
57
|
+
height: 'var(--epr-skin-tone-size)',
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
right: '0',
|
|
60
|
+
transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
|
|
61
|
+
zIndex: '0',
|
|
62
|
+
border: '1px solid var(--epr-skin-tone-outer-border-color)',
|
|
63
|
+
boxShadow: 'inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
|
|
54
64
|
':hover': {
|
|
55
|
-
boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color)'
|
|
65
|
+
boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)'
|
|
56
66
|
},
|
|
57
67
|
':focus': {
|
|
58
68
|
boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
|
|
@@ -139,14 +139,7 @@ const styles = stylesheet.create({
|
|
|
139
139
|
// @ts-ignore - backdropFilter is not recognized.
|
|
140
140
|
backdropFilter: 'blur(5px)',
|
|
141
141
|
background: 'var(--epr-skin-tone-picker-menu-color)',
|
|
142
|
-
'.epr-active
|
|
143
|
-
content: '',
|
|
144
|
-
position: 'absolute',
|
|
145
|
-
top: '-2px',
|
|
146
|
-
left: '-2px',
|
|
147
|
-
right: '-2px',
|
|
148
|
-
bottom: '-2px',
|
|
149
|
-
borderRadius: '5px',
|
|
142
|
+
'.epr-active': {
|
|
150
143
|
border: '1px solid var(--epr-active-skin-tone-indicator-border-color)'
|
|
151
144
|
}
|
|
152
145
|
},
|
|
@@ -154,18 +147,6 @@ const styles = stylesheet.create({
|
|
|
154
147
|
'.': 'epr-skin-tone-select',
|
|
155
148
|
position: 'relative',
|
|
156
149
|
width: 'var(--epr-skin-tone-size)',
|
|
157
|
-
height: 'var(--epr-skin-tone-size)'
|
|
158
|
-
'> button': {
|
|
159
|
-
width: 'var(--epr-skin-tone-size)',
|
|
160
|
-
display: 'block',
|
|
161
|
-
cursor: 'pointer',
|
|
162
|
-
borderRadius: '4px',
|
|
163
|
-
height: 'var(--epr-skin-tone-size)',
|
|
164
|
-
position: 'absolute',
|
|
165
|
-
right: '0',
|
|
166
|
-
transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
|
|
167
|
-
zIndex: '0',
|
|
168
|
-
boxShadow: '0 0 0 0px var(--epr-active-skin-hover-color)'
|
|
169
|
-
}
|
|
150
|
+
height: 'var(--epr-skin-tone-size)'
|
|
170
151
|
}
|
|
171
152
|
});
|
|
@@ -96,7 +96,9 @@ const DarkTheme = {
|
|
|
96
96
|
'--epr-category-icon-active-color':
|
|
97
97
|
'var(--epr-dark-category-icon-active-color)',
|
|
98
98
|
'--epr-skin-tone-picker-menu-color':
|
|
99
|
-
'var(--epr-dark-skin-tone-picker-menu-color)'
|
|
99
|
+
'var(--epr-dark-skin-tone-picker-menu-color)',
|
|
100
|
+
'--epr-skin-tone-outer-border-color': 'var(--epr-dark-skin-tone-outer-border-color)',
|
|
101
|
+
'--epr-skin-tone-inner-border-color': 'var(--epr-dark-skin-tone-inner-border-color)'
|
|
100
102
|
};
|
|
101
103
|
|
|
102
104
|
const styles = stylesheet.create({
|
|
@@ -120,8 +122,8 @@ const styles = stylesheet.create({
|
|
|
120
122
|
baseVariables: {
|
|
121
123
|
'--': {
|
|
122
124
|
'--epr-highlight-color': '#007aeb',
|
|
123
|
-
'--epr-hover-bg-color': '#
|
|
124
|
-
'--epr-hover-bg-color-reduced-opacity': '#
|
|
125
|
+
'--epr-hover-bg-color': '#e5f0fa',
|
|
126
|
+
'--epr-hover-bg-color-reduced-opacity': '#e5f0fa80',
|
|
125
127
|
'--epr-focus-bg-color': '#e0f0ff',
|
|
126
128
|
'--epr-text-color': '#858585',
|
|
127
129
|
'--epr-search-input-bg-color': '#f6f6f6',
|
|
@@ -130,6 +132,8 @@ const styles = stylesheet.create({
|
|
|
130
132
|
'--epr-reactions-bg-color': '#ffffff90',
|
|
131
133
|
'--epr-category-icon-active-color': '#6aa8de',
|
|
132
134
|
'--epr-skin-tone-picker-menu-color': '#ffffff95',
|
|
135
|
+
'--epr-skin-tone-outer-border-color': '#555555',
|
|
136
|
+
'--epr-skin-tone-inner-border-color': 'var(--epr-bg-color)',
|
|
133
137
|
|
|
134
138
|
'--epr-horizontal-padding': '10px',
|
|
135
139
|
|
|
@@ -208,7 +212,9 @@ const styles = stylesheet.create({
|
|
|
208
212
|
'--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
|
|
209
213
|
'--epr-dark-emoji-variation-indicator-color': '#444',
|
|
210
214
|
'--epr-dark-category-icon-active-color': '#3271b7',
|
|
211
|
-
'--epr-dark-skin-tone-picker-menu-color': '#22222295'
|
|
215
|
+
'--epr-dark-skin-tone-picker-menu-color': '#22222295',
|
|
216
|
+
'--epr-dark-skin-tone-outer-border-color': 'var(--epr-dark-picker-border-color)',
|
|
217
|
+
'--epr-dark-skin-tone-inner-border-color': '#FFFFFF',
|
|
212
218
|
}
|
|
213
219
|
},
|
|
214
220
|
autoThemeDark: {
|