fix: move more stuff to css vars

README.md

@@ -54,7 +54,6 @@ document.body.appendChild(picker);
 | `dataSource` | String | `"https://cdn.jsdelivr.net/npm/emojibase-data@5/en/data.json"` | Where to fetch the emoji data from. Note that `lite-emoji-picker` requires the full `data.json`, not `compact.json`. |
 | `locale` | String | `"en"` | Locale, should map to the locales supported by `emojibase-data` |
 | `i18n` | Object | See below | Strings to use for internationalization of the Picker itself, i.e. the text and `aria-label`s. Note that `lite-emoji-picker` only ships with English by default. |
-| `numColumns` | number | `8` | Number of emoji to show per row. |
 
 These values can also be set at runtime, e.g.:
 
@@ -102,7 +101,19 @@ By default, `lite-emoji-picker` will automatically switch to dark mode based on
 
 Many attributes such as colors and sizes can be styled with CSS variables. Here is a list:
 
-<!-- TODO: list of CSS variables -->
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| --lep-num-columns | integer | 8 | Number of emoji to show per row |
+
+For example:
+
+```css
+lite-emoji-picker {
+  --lep-num-columns: 6;
+  --lep-emoji-size: 3rem;
+  --lep-background-color: gray;
+}
+```
 
 ### Database
 

src/svelte/components/Picker/Picker.html

@@ -3,7 +3,6 @@
   class="lep-picker"
   aria-label={i18n.regionLabel}
   bind:this={rootElement}
-  style="--lep-num-columns: {numColumns};"  
 >
   <div class="lep-search-row">
     <div class="lep-search-wrapper"
@@ -71,10 +70,6 @@
             {emoji.unicode}
           </button>
         {/each}
-        <!-- Render placeholders to make sure that the grid spacing looks correct. There may be a better way. -->
-        {#each placeholders as placeholder}
-          <div class="lep-emoji lep-hidden"></div>
-        {/each}
     </div>
   </div>
   <div aria-hidden="true" class="lep-hidden lep-abs-pos">

src/svelte/components/Picker/Picker.js

@@ -4,7 +4,7 @@ import Database from '../../../database/Database.js'
 import i18n from '../../i18n/en.json'
 import { categories } from '../../categories'
 import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../../../database/constants'
-import { MIN_SEARCH_TEXT_LENGTH, DEFAULT_NUM_COLUMNS } from '../../constants'
+import { MIN_SEARCH_TEXT_LENGTH } from '../../constants'
 import { requestIdleCallback } from '../../utils/requestIdleCallback'
 import { calculateTextWidth } from '../../utils/calculateTextWidth'
 import { hasZwj } from '../../utils/hasZwj'
@@ -12,7 +12,6 @@ import { thunk } from '../../utils/thunk'
 import { emojiSupportLevel, supportedZwjEmojis } from '../../utils/emojiSupport'
 
 let database
-let numColumns = DEFAULT_NUM_COLUMNS
 let currentEmojis = []
 let locale = DEFAULT_LOCALE
 let dataSource = DEFAULT_DATA_SOURCE
@@ -21,13 +20,11 @@ let rawSearchText = ''
 let searchText = ''
 let rootElement
 let baselineEmoji
-let placeholders = [] // eslint-disable-line no-unused-vars
 let searchMode = false // eslint-disable-line no-unused-vars
 let activeSearchItem = -1
 
 const getBaselineEmojiWidth = thunk(() => calculateTextWidth(baselineEmoji))
 $: database = new Database({ dataSource, locale })
-$: placeholders = new Array(numColumns - (currentEmojis.length % numColumns)).fill()
 $: {
   // eslint-disable-next-line no-inner-declarations
   async function updateEmojis () {
@@ -135,6 +132,5 @@ function onSearchKeydown (event) {
 export {
   locale,
   dataSource,
-  i18n,
-  numColumns
+  i18n
 }

src/svelte/components/Picker/Picker.scss

@@ -1,5 +1,9 @@
 @import '../../styles/global.scss';
 
+.lep-picker {
+  --total-emoji-size: calc(var(--lep-emoji-size) + (2 * var(--lep-emoji-padding)));
+}
+
 //
 // tab panel
 //
@@ -15,7 +19,7 @@
 
 .lep-emoji-menu {
   display: grid;
-  grid-template-columns: repeat(var(--lep-num-columns), auto);
+  grid-template-columns: repeat(var(--lep-num-columns), var(--total-emoji-size));
   justify-content: space-around;
   align-items: flex-start;
   width: 100%;
@@ -25,18 +29,15 @@
 // emoji
 //
 
-$emojiSize: 1.375rem;
-$emojiPadding: 0.5rem;
-
 button.lep-emoji, .lep-emoji {
-  padding: $emojiPadding;
-  font-size: $emojiSize;
+  padding: var(--lep-emoji-padding);
+  font-size: var(--lep-emoji-size);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  height: $emojiSize + (2 * $emojiPadding);
-  width: $emojiSize + (2 * $emojiPadding);
+  height: var(--total-emoji-size);
+  width: var(--total-emoji-size);
   overflow: hidden;
 
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla",

src/svelte/constants.js

@@ -1,2 +1 @@
 export const MIN_SEARCH_TEXT_LENGTH = 2
-export const DEFAULT_NUM_COLUMNS = 8

src/svelte/styles/variables.scss

@@ -1,6 +1,9 @@
 @mixin sizes() {
   --lep-indicator-height: 3px;
   --lep-outline-size: 2px;
+  --lep-num-columns: 8;
+  --lep-emoji-size: 1.375rem;
+  --lep-emoji-padding: 0.5rem;
 }
 
 @mixin colors($dark) {