emoji-picker-react 4.5.5 → 4.5.6

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 (15) hide show
  1. package/dist/DomUtils/classNames.d.ts +3 -1
  2. package/dist/emoji-picker-react.cjs.development.css +19 -1
  3. package/dist/emoji-picker-react.cjs.development.js +3 -13
  4. package/dist/emoji-picker-react.cjs.development.js.map +1 -1
  5. package/dist/emoji-picker-react.cjs.production.min.js +1 -1
  6. package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
  7. package/dist/emoji-picker-react.esm.js +4 -14
  8. package/dist/emoji-picker-react.esm.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/DomUtils/classNames.ts +3 -1
  11. package/src/EmojiPickerReact.css +71 -14
  12. package/src/components/main/PickerMain.tsx +4 -1
  13. package/src/config/useConfig.ts +0 -5
  14. package/dist/DomUtils/isDarkTheme.d.ts +0 -1
  15. package/src/DomUtils/isDarkTheme.ts +0 -7
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.5.5",
2
+ "version": "4.5.6",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/DomUtils/classNames.ts CHANGED
@@ -16,7 +16,9 @@ export enum ClassNames {
16
16
  open = 'epr-open',
17
17
  vertical = 'epr-vertical',
18
18
  horizontal = 'epr-horizontal',
19
- variationPicker = 'epr-emoji-variation-picker'
19
+ variationPicker = 'epr-emoji-variation-picker',
20
+ darkTheme = 'epr-dark-theme',
21
+ autoTheme = 'epr-auto-theme'
20
22
  }
21
23
 
22
24
  export function asSelectors(...classNames: ClassNames[]): string {
package/src/EmojiPickerReact.css CHANGED
@@ -71,21 +71,78 @@
71
71
  --epr-preview-z-index: 6;
72
72
  }
73
73
 
74
- .EmojiPickerReact.epr-dark-theme {
74
+ .EmojiPickerReact {
75
+ /* Dark Theme Variables */
75
76
  --epr-dark: #000;
76
- --epr-emoji-variation-picker-bg-color: var(--epr-dark);
77
- --epr-highlight-color: #c0c0c0;
78
- --epr-text-color: var(--epr-highlight-color);
79
- --epr-hover-bg-color: #363636f6;
80
- --epr-focus-bg-color: #474747;
81
- --epr-search-input-bg-color: #333333;
82
- --epr-category-label-bg-color: #222222e6;
83
- --epr-picker-border-color: #151617;
84
- --epr-bg-color: #222222;
85
- --epr-search-input-bg-color-active: var(--epr-dark);
86
- --epr-emoji-variation-indicator-color: #444;
87
- --epr-category-icon-active-color: #3271b7;
88
- --epr-skin-tone-picker-menu-color: #22222295;
77
+ --epr-dark-emoji-variation-picker-bg-color: var(--epr-dark);
78
+ --epr-dark-highlight-color: #c0c0c0;
79
+ --epr-dark-text-color: var(--epr-highlight-color);
80
+ --epr-dark-hover-bg-color: #363636f6;
81
+ --epr-dark-focus-bg-color: #474747;
82
+ --epr-dark-search-input-bg-color: #333333;
83
+ --epr-dark-category-label-bg-color: #222222e6;
84
+ --epr-dark-picker-border-color: #151617;
85
+ --epr-dark-bg-color: #222222;
86
+ --epr-dark-search-input-bg-color-active: var(--epr-dark);
87
+ --epr-dark-emoji-variation-indicator-color: #444;
88
+ --epr-dark-category-icon-active-color: #3271b7;
89
+ --epr-dark-skin-tone-picker-menu-color: #22222295;
90
+ }
91
+
92
+ @media (prefers-color-scheme: dark) {
93
+ /* Keep in sync with the section below */
94
+ .EmojiPickerReact.epr-auto-theme {
95
+ --epr-dark: var(--epr-dark-dark);
96
+ --epr-emoji-variation-picker-bg-color: var(
97
+ --epr-dark-emoji-variation-picker-bg-color
98
+ );
99
+ --epr-highlight-color: var(--epr-dark-highlight-color);
100
+ --epr-text-color: var(--epr-dark-text-color);
101
+ --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
102
+ --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
103
+ --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
104
+ --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
105
+ --epr-picker-border-color: var(--epr-dark-picker-border-color);
106
+ --epr-bg-color: var(--epr-dark-bg-color);
107
+ --epr-search-input-bg-color-active: var(
108
+ --epr-dark-search-input-bg-color-active
109
+ );
110
+ --epr-emoji-variation-indicator-color: var(
111
+ --epr-dark-emoji-variation-indicator-color
112
+ );
113
+ --epr-category-icon-active-color: var(
114
+ --epr-dark-category-icon-active-color
115
+ );
116
+ --epr-skin-tone-picker-menu-color: var(
117
+ --epr-dark-skin-tone-picker-menu-color
118
+ );
119
+ }
120
+ }
121
+
122
+ .EmojiPickerReact.epr-dark-theme {
123
+ /* Keep in sync with the section above */
124
+ --epr-dark: var(--epr-dark-dark);
125
+ --epr-emoji-variation-picker-bg-color: var(
126
+ --epr-dark-emoji-variation-picker-bg-color
127
+ );
128
+ --epr-highlight-color: var(--epr-dark-highlight-color);
129
+ --epr-text-color: var(--epr-dark-text-color);
130
+ --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
131
+ --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
132
+ --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
133
+ --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
134
+ --epr-picker-border-color: var(--epr-dark-picker-border-color);
135
+ --epr-bg-color: var(--epr-dark-bg-color);
136
+ --epr-search-input-bg-color-active: var(
137
+ --epr-dark-search-input-bg-color-active
138
+ );
139
+ --epr-emoji-variation-indicator-color: var(
140
+ --epr-dark-emoji-variation-indicator-color
141
+ );
142
+ --epr-category-icon-active-color: var(--epr-dark-category-icon-active-color);
143
+ --epr-skin-tone-picker-menu-color: var(
144
+ --epr-dark-skin-tone-picker-menu-color
145
+ );
89
146
  }
90
147
 
91
148
  .EmojiPickerReact {
package/src/components/main/PickerMain.tsx CHANGED
@@ -40,11 +40,14 @@ function PickerRootElement({ children }: RootProps) {
40
40
  width
41
41
  };
42
42
 
43
+
44
+
43
45
  return (
44
46
  <aside
45
47
  className={clsx(ClassNames.emojiPicker, 'epr-main', {
46
48
  [ClassNames.searchActive]: searchModeActive,
47
- 'epr-dark-theme': theme === Theme.DARK
49
+ [ClassNames.darkTheme]: theme === Theme.DARK,
50
+ [ClassNames.autoTheme]: theme === Theme.AUTO
48
51
  })}
49
52
  ref={PickerMainRef}
50
53
  style={style}
package/src/config/useConfig.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { isSystemDarkTheme } from '../DomUtils/isDarkTheme';
2
1
  import { usePickerConfig } from '../components/context/PickerConfigContext';
3
2
  import {
4
3
  EmojiClickData,
@@ -73,10 +72,6 @@ export function usePreviewConfig(): PreviewConfig {
73
72
  export function useThemeConfig(): Theme {
74
73
  const { theme } = usePickerConfig();
75
74
 
76
- if (theme === Theme.AUTO) {
77
- return isSystemDarkTheme() ? Theme.DARK : Theme.LIGHT;
78
- }
79
-
80
75
  return theme;
81
76
  }
82
77
 
package/dist/DomUtils/isDarkTheme.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare function isSystemDarkTheme(): boolean;
package/src/DomUtils/isDarkTheme.ts DELETED
@@ -1,7 +0,0 @@
1
- export function isSystemDarkTheme(): boolean {
2
- if (typeof window === 'undefined') {
3
- return false;
4
- }
5
-
6
- return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
7
- }