/
outline-swatch-set.ts
53 lines (47 loc) · 1.5 KB
/
outline-swatch-set.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { html, TemplateResult, CSSResultGroup } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import componentStyles from './outline-swatch-set.css.lit';
import { OutlineElement } from '../outline-element/outline-element';
import tailwindThemeConfig from '../../../resolved-tailwind-config';
// const outline = require('../outline.config');
import '../outline-grid/outline-grid';
import '../outline-grid/outline-column/outline-column';
import '../outline-swatch/outline-swatch';
export const swatchSets = ['brand', 'neutral', 'ui', 'demo'] as const;
export type SwatchSet = typeof swatchSets[number];
export interface OutlineSwatchSetInterface extends HTMLElement {
set: SwatchSet;
}
/**
* Color swatch set
*
* @element outline-swatch-set
*/
@customElement('outline-swatch-set')
export class OutlineSwatchSet
extends OutlineElement
implements OutlineSwatchSetInterface
{
static styles: CSSResultGroup = [componentStyles];
@property({ type: String })
set: SwatchSet = 'brand';
render(): TemplateResult {
const colors = Object.entries(tailwindThemeConfig.colors[this.set]).map(
([name]) => name
);
return html`
<outline-grid>
${colors.map(
color => html`
<outline-column col-span-md="6" col-span-lg="4" col-span-xl="3">
<outline-swatch
set="${this.set}"
color="${color}"
></outline-swatch>
</outline-column>
`
)}
</outline-grid>
`;
}
}