emoji-picker-react 4.7.7 → 4.7.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.7",
+  "version": "4.7.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,6 +98,6 @@
     "rollup-plugin-svg": "^2.0.0"
   },
   "dependencies": {
-    "flairup": "0.0.32"
+    "flairup": "0.0.35"
   }
 }

package/src/Stylesheet/stylesheet.tsx

@@ -1,4 +1,4 @@
-import { createSheet } from 'flairup';
+import { Styles, createSheet } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../DomUtils/classNames';
@@ -84,3 +84,16 @@ export const commonInteractionStyles = stylesheet.create({
     }
   }
 });
+
+export function darkMode(key: string, value: Styles) {
+  return {
+    '.epr-dark-theme': {
+      [key]: value
+    },
+    '.epr-auto-theme': {
+      [key]: {
+        '@media (prefers-color-scheme: dark)': value
+      }
+    }
+  };
+}

package/src/components/Reactions/BtnPlus.tsx

@@ -1,7 +1,7 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 import { useReactionsModeState } from '../context/PickerContext';
 
@@ -23,7 +23,7 @@ export function BtnPlus() {
 const styles = stylesheet.create({
   plusSign: {
     fontSize: '20px',
-    padding: '18px',
+    padding: '17px',
     color: 'var(--epr-text-color)',
     borderRadius: '50%',
     textAlign: 'center',
@@ -33,7 +33,7 @@ const styles = stylesheet.create({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    transition: 'background-color 0.1s ease-in-out',
+    transition: 'background-color 0.2s ease-in-out',
     ':after': {
       content: '',
       minWidth: '20px',
@@ -46,34 +46,23 @@ const styles = stylesheet.create({
     },
     ':hover': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px',
-        transform: 'scale(1.2)'
+        backgroundPositionY: '-20px'
       }
     },
     ':focus': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
         backgroundPositionY: '-40px'
       }
     }
   },
-  '.epr-dark-theme': {
-    plusSign: {
-      ':after': { backgroundPositionY: '-40px' },
-      ':hover:after': { backgroundPositionY: '-60px' }
-    }
-  },
-  '.epr-auto-theme': {
-    plusSign: {
-      '@media (prefers-color-scheme: dark)': {
-        ':after': { backgroundPositionY: '-40px' },
-        ':hover:after': { backgroundPositionY: '-60px' }
-      }
-    }
-  }
+  ...darkMode('plusSign', {
+    ':after': { backgroundPositionY: '-40px' },
+    ':hover:after': { backgroundPositionY: '-60px' }
+  })
 });

package/src/components/body/EmojiVariationPicker.tsx

@@ -10,7 +10,7 @@ import {
   emojiTrueOffsetTop,
   emojiTruOffsetLeft
 } from '../../DomUtils/selectors';
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig
@@ -230,16 +230,7 @@ const styles = stylesheet.create({
     transform: 'translateX(-18px)',
     backgroundImage: `url(${SVGTriangle})`
   },
-  '.epr-dark-theme': {
-    pointer: {
-      backgroundPosition: '-25px 0'
-    }
-  },
-  '.epr-auto-theme': {
-    pointer: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPosition: '-25px 0'
-      }
-    }
-  }
+  ...darkMode('pointer', {
+    backgroundPosition: '-25px 0'
+  })
 });

package/src/components/header/Search/IcnSearch.tsx

@@ -1,7 +1,7 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 
 import SVGMagnifier from './svg/magnifier.svg';
 
@@ -24,16 +24,7 @@ const styles = stylesheet.create({
     backgroundSize: '20px',
     backgroundImage: `url(${SVGMagnifier})`
   },
-  '.epr-dark-theme': {
-    icnSearch: {
-      backgroundPositionY: '-20px'
-    }
-  },
-  '.epr-auto-theme': {
-    icnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-20px'
-      }
-    }
-  }
+  ...darkMode('icnSearch', {
+    backgroundPositionY: '-20px'
+  })
 });

package/src/components/main/PickerMain.tsx

@@ -77,6 +77,8 @@ function PickerRootElement({ children }: RootProps) {
 const DarkTheme = {
   '--epr-emoji-variation-picker-bg-color':
     'var(--epr-dark-emoji-variation-picker-bg-color)',
+  '--epr-hover-bg-color-reduced-opacity':
+    'var(--epr-dark-hover-bg-color-reduced-opacity)',
   '--epr-highlight-color': 'var(--epr-dark-highlight-color)',
   '--epr-text-color': 'var(--epr-dark-text-color)',
   '--epr-hover-bg-color': 'var(--epr-dark-hover-bg-color)',
@@ -119,6 +121,7 @@ const styles = stylesheet.create({
     '--': {
       '--epr-highlight-color': '#007aeb',
       '--epr-hover-bg-color': '#f1f8ff',
+      '--epr-hover-bg-color-reduced-opacity': '#f1f8ff80',
       '--epr-focus-bg-color': '#e0f0ff',
       '--epr-text-color': '#858585',
       '--epr-search-input-bg-color': '#f6f6f6',
@@ -195,6 +198,7 @@ const styles = stylesheet.create({
       '--epr-dark-highlight-color': '#c0c0c0',
       '--epr-dark-text-color': 'var(--epr-highlight-color)',
       '--epr-dark-hover-bg-color': '#363636f6',
+      '--epr-dark-hover-bg-color-reduced-opacity': '#36363680',
       '--epr-dark-focus-bg-color': '#474747',
       '--epr-dark-search-input-bg-color': '#333333',
       '--epr-dark-category-label-bg-color': '#222222e6',