devs
/
emoji-picker-element
mirror of https://github.com/nolanlawson/emoji-picker-element.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: automatically generate CSS variable docs

This commit is contained in:
Nolan Lawson 2020-06-06 14:09:23 -07:00
parent 85bbd2e119
commit f765f1e81e
6 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -143,22 +143,44 @@ For more fine-grained, control, add the class `dark` or `light` to force dark/li
###### CSS variables
Many attributes such as colors and sizes can be styled with CSS variables. Here is a list:
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| --num-columns | integer | 8 | Number of emoji to show per row |
For example:
Many attributes such as colors and sizes can be styled with CSS variables. For example:
```css
emoji-picker {
--num-columns: 6;
--emoji-size: 3rem;
--background-color: gray;
--background: gray;
}
```
Here is a full list of options:
<!-- CSS variable options start -->
| Variable | Default | Default (dark) | Description |
| ---------------------------- | ---------- | -------------- | ----------------------------------------------- |
| `--background` | `#fff` | `#222` | Background of the entire <emoji-picker> |
| `--border-color` | `#e0e0e0` | `#444` | |
| `--button-active-background` | `#e6e6e6` | `#555555` | Background of an active button |
| `--button-hover-background` | `#d9d9d9` | `#484848` | Background of a hovered button |
| `--emoji-padding` | `0.5rem` | | |
| `--emoji-size` | `1.375rem` | | |
| `--indicator-color` | `#385ac1` | `#5373ec` | Color of the nav indicator |
| `--indicator-height` | `3px` | | Height of the nav indicator |
| `--input-border-color` | `#999` | `#ccc` | |
| `--input-border-radius` | `0.5rem` | | |
| `--input-border-size` | `1px` | | |
| `--input-font-color` | `#111` | `#efefef` | |
| `--input-font-size` | `1rem` | | |
| `--input-line-height` | `1.5` | | |
| `--input-padding` | `0.25rem` | | |
| `--input-placeholder-color` | `#999` | `#ccc` | |
| `--num-columns` | `8` | | How many columns to display in the emoji grid |
| `--outline-color` | `#999` | `#fff` | Focus outline color |
| `--outline-size` | `2px` | | Focus outline width |
<!-- CSS variable options end -->
### Database
You can work with the database API separately:

64
bin/generateCssDocs.js Normal file
View File

@ -0,0 +1,64 @@
import sass from 'sass'
import table from 'markdown-table'
import fs from 'fs'
import { promisify } from 'util'
const readFile = promisify(fs.readFile)
const writeFile = promisify(fs.writeFile)
const START_MARKER = '<!-- CSS variable options start -->'
const END_MARKER = '<!-- CSS variable options end -->'
function extractCSSVariables (css) {
return [...css.matchAll(/(--[^:]+)\s*:\s*([^;]+)\s*;\s*(?:\/\*(.*?)\*\/)?/gs)]
.map(_ => ({
name: _[1],
value: _[2],
comments: _[3]
}))
}
// Find all the CSS variables declared on the :host and print them out
// into the README as documentation
async function generateMarkdownTable (css) {
css = css.replace(/@media.*?\{.*\}/sg, '')
const hosts = [...css.matchAll(/:host\s*(?:,\s*:host\(\.light\))?\s*\{(.*?)\}/gs)].map(_ => _[1])
const darkHosts = [...css.matchAll(/:host\(\.dark\)\s*\{(.*?)\}/gs)].map(_ => _[1])
const vars = hosts.map(extractCSSVariables).flat()
const darkVars = darkHosts.map(extractCSSVariables).flat()
const sortedVars = vars.sort((a, b) => a.name < b.name ? -1 : 1)
const data = sortedVars.map(({ name, value, comments }) => {
const darkIndex = darkVars.findIndex(_ => _.name === name)
let darkValue = darkIndex !== -1 ? darkVars[darkIndex].value : ''
if (darkValue === value) {
darkValue = ''
}
const wrap = _ => ('`' + _ + '`')
return [wrap(name), wrap(value), darkValue ? wrap(darkValue) : '', comments || '']
})
const headers = ['Variable', 'Default', 'Default (dark)', 'Description']
return table([
headers,
...data
])
}
async function main () {
const css = sass.renderSync({ file: './src/picker/styles/variables.scss' }).css.toString('utf8')
const markdown = await generateMarkdownTable(css)
let readme = await readFile('./README.md', 'utf8')
const startIndex = readme.indexOf(START_MARKER)
const endIndex = readme.indexOf(END_MARKER) + END_MARKER.length
readme = readme.substring(0, startIndex) +
START_MARKER + '\n\n' + markdown + '\n\n' + END_MARKER +
readme.substring(endIndex)
await writeFile('./README.md', readme, 'utf8')
}
main().catch(err => {
console.error(err)
process.exit(1)
})

5
package.json
View File

@ -11,7 +11,9 @@
"picker.js*"
],
"scripts": {
"build": "NODE_ENV=production rollup -c",
"build": "run-s build:rollup build:css-docs",
"build:rollup": "NODE_ENV=production rollup -c",
"build:css-docs": "node ./bin/generateCssDocs",
"dev": "NODE_ENV=development rollup -c -w",
"lint": "standard && stylelint '**/*.scss'",
"lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
@ -53,6 +55,7 @@
"jest-transform-svelte": "^2.1.1",
"lint-staged": "^10.2.7",
"lodash-es": "^4.17.15",
"markdown-table": "^2.0.0",
"node-fetch": "^2.6.0",
"npm-run-all": "^4.1.5",
"rollup": "^2.8.2",

6
src/picker/components/Picker/Picker.scss
View File

@ -55,12 +55,12 @@ button.emoji,
sans-serif;
&:hover {
background-color: var(--hover-background-color);
background: var(--button-hover-background);
}
&:active,
&.active-search-item {
background-color: var(--active-background-color);
background: var(--button-active-background);
}
}
@ -126,7 +126,7 @@ input.search {
padding: var(--input-padding);
border-radius: var(--input-border-radius);
border: var(--input-border-size) solid var(--input-border-color);
background-color: var(--background-color);
background: var(--background);
color: var(--input-font-color);
width: 100%;
font-size: var(--input-font-size);

2
src/picker/styles/global.scss
View File

@ -23,7 +23,7 @@
contain: content;
display: flex;
flex-direction: column;
background: var(--background-color);
background: var(--background);
border: 1px solid var(--border-color);
width: 100%;
height: 100%;

20
src/picker/styles/variables.scss
View File

@ -1,14 +1,14 @@
@mixin sizes() {
--emoji-padding: 0.5rem;
--emoji-size: 1.375rem;
--indicator-height: 3px;
--indicator-height: 3px; /* Height of the nav indicator */
--input-border-radius: 0.5rem;
--input-border-size: 1px;
--input-font-size: 1rem;
--input-line-height: 1.5;
--input-padding: 0.25rem;
--num-columns: 8;
--outline-size: 2px;
--num-columns: 8; /* How many columns to display in the emoji grid */
--outline-size: 2px; /* Focus outline width */
}
@mixin colors($dark) {
@ -31,22 +31,22 @@
$outline: #fff;
}
--background-color: #{$bg};
--background: #{$bg}; /* Background of the entire <emoji-picker> */
--border-color: #{$border};
--indicator-color: #{$indicator};
--indicator-color: #{$indicator}; /* Color of the nav indicator */
--input-border-color: #{$input-border};
--input-font-color: #{$input-color};
--input-placeholder-color: #{$input-placeholder};
--outline-color: #{$outline};
--outline-color: #{$outline}; /* Focus outline color */
@if $dark {
--active-background-color: #{lighten($bg, 20%)};
--hover-background-color: #{lighten($bg, 15%)};
--button-active-background: #{lighten($bg, 20%)};
--button-hover-background: #{lighten($bg, 15%)};
}
@else {
--active-background-color: #{darken($bg, 10%)};
--hover-background-color: #{darken($bg, 15%)};
--button-active-background: #{darken($bg, 10%)}; /* Background of an active button */
--button-hover-background: #{darken($bg, 15%)}; /* Background of a hovered button */
}
}