Add overridable CSS variable support

css/emoji-button.css

@@ -106,22 +106,25 @@
   --dark-search-focus-border-color: #DBE5F9;
   --dark-popup-background-color: #333333;
   --dark-category-button-color: #FFFFFF;
+
+  --font: Arial, Helvetica, sans-serif;
+  --font-size: 16px;
 }
 
 .emoji-picker {
-  font-size: 16px;
-
+  font-size: var(--font-size);
   border: 1px solid var(--border-color);
   border-radius: 5px;
   background: var(--background-color);
   width: calc(var(--emoji-per-row) * var(--emoji-size) * var(--emoji-size-multiplier) + 1em + 1.5rem);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font);
   overflow: hidden;
   animation: show var(--animation-duration) var(--animation-easing);
 }
 
-.emoji-picker h2 {
-  font-family: Arial, Helvetica, sans-serif;
+.emoji-picker * {
+  font-family: var(--font);
+  box-sizing: content-box;
 }
 
 .emoji-picker__overlay {

index.d.ts

@@ -40,6 +40,9 @@ declare namespace EmojiButton {
     plugins?: Plugin[];
     icons?: Icons;
     rootElement?: HTMLElement;
+    styleProperties?: {
+      [key: string]: string;
+    };
   }
 
   export interface FixedPosition {

site/src/components/Sidebar.js

@@ -66,6 +66,11 @@ export default function Sidebar() {
             Customization
           </Link>
         </li>
+        <li>
+          <Link activeClassName={styles.active} to="/docs/styleCustomization">
+            Style Customization
+          </Link>
+        </li>
         <li>
           <Link activeClassName={styles.active} to="/docs/i18n">
             I18N Strings
@@ -80,6 +85,11 @@ export default function Sidebar() {
             API
           </Link>
         </li>
+        <li>
+          <Link activeClassName={styles.active} to="/docs/cssVariables">
+            CSS Variables
+          </Link>
+        </li>
         <li>
           <Link activeClassName={styles.active} to="/docs/events">
             Events

site/src/examples/styleCustomization.js

@@ -0,0 +1,6 @@
+const picker = new EmojiButton({
+  styleProperties: {
+    '--font': 'Courier New',
+    '--category-button-color': 'red'
+  }
+});

site/src/pages/docs/cssVariables.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import DocLayout from '../../components/DocLayout';
+
+export default function CssVariables() {
+  return (
+    <DocLayout>
+      <h1>CSS Variables</h1>
+
+      <p>
+        The following CSS variables are supported via the
+        <code>styleProperties</code> picker option. There are other CSS
+        variables, but overriding them may cause unexpected results.
+      </p>
+
+      <h2>
+        <code>--background-color</code>
+      </h2>
+      <p>The background color of the picker.</p>
+
+      <h2>
+        <code>--category-button-color</code>
+      </h2>
+      <p>The color of the category buttons.</p>
+
+      <h2>
+        <code>--category-button-active-color</code>
+      </h2>
+      <p>The color of the active category button.</p>
+
+      <h2>
+        <code>--font</code>
+      </h2>
+      <p>The font to use for all UI elements in the picker.</p>
+
+      <h2>
+        <code>--font-size</code>
+      </h2>
+      <p>The base font size to use for all UI elements in the picker.</p>
+
+      <h2>
+        <code>--hover-color</code>
+      </h2>
+      <p>The background color when hovering over an emoji.</p>
+
+      <h2>
+        <code>--secondary-text-color</code>
+      </h2>
+      <p>The secondary text color.</p>
+
+      <h2>
+        <code>--text-color</code>
+      </h2>
+      <p>The primary text color.</p>
+    </DocLayout>
+  );
+}

site/src/pages/docs/styleCustomization.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Link } from 'gatsby';
+
+import DocLayout from '../../components/DocLayout';
+import Example from '../../components/Example';
+import SourceFile from '../../components/SourceFile';
+
+import customExample from '!!raw-loader!../../examples/styleCustomization.js';
+
+export default function StyleCustomizationExample() {
+  return (
+    <DocLayout>
+      <h1>Style Customization</h1>
+      <p>
+        Emoji Button uses CSS variables for its styling. You can override any of
+        these variables by including them in the <code>styleProperties</code>{' '}
+        option. This option is a set of keys and values mapping CSS variable
+        names to their values.
+      </p>
+
+      <p>
+        See <Link to="/docs/cssVariables">CSS Variables</Link> for a list of
+        variables that can be overridden.
+      </p>
+
+      <div>
+        <Example
+          options={{
+            styleProperties: {
+              '--font': 'Courier New',
+              '--category-button-color': 'red'
+            }
+          }}
+        />
+        <SourceFile src={customExample} />
+      </div>
+    </DocLayout>
+  );
+}

src/index.ts

@@ -156,6 +156,17 @@ export class EmojiButton {
       this.pickerEl.style.setProperty('--category-button-height', '0');
     }
 
+    if (this.options.styleProperties) {
+      Object.keys(this.options.styleProperties).forEach(key => {
+        if (this.options.styleProperties) {
+          this.pickerEl.style.setProperty(
+            key,
+            this.options.styleProperties[key]
+          );
+        }
+      });
+    }
+
     this.focusTrap = createFocusTrap(this.pickerEl as HTMLElement, {
       clickOutsideDeactivates: true,
       initialFocus:

src/types.ts

@@ -59,6 +59,9 @@ export interface EmojiButtonOptions {
   custom?: EmojiRecord[];
   plugins?: Plugin[];
   icons?: Icons;
+  styleProperties?: {
+    [key: string]: string;
+  };
 }
 
 export interface FixedPosition {