wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

colour swatches for theme builder

Browse source
This commit is contained in:
Jon McClure 2023-09-18 18:35:50 +01:00
parent 9f1878bb18
commit f8a66fd1ca
2 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx
View file

@ -24,6 +24,8 @@ const Value = ({ value, name, map, themeName, theme, setTheme }) => {
setTheme(mutableTheme);
};
const isColour = !/var\(.*\)/i.test(value) && CSS.supports('color', value);
return (
<div className="value">
<label>
@ -31,7 +33,7 @@ const Value = ({ value, name, map, themeName, theme, setTheme }) => {
<button className={isOpen ? 'open' : ''} onClick={() => setIsOpen(o => !o)}>
<div>
<span className="material-symbols-outlined">{isOpen ? 'expand_less' : 'expand_more'}</span>
</div> {name}
</div> {isColour && (<div style={{ background: value }}></div>)} {name}
</button>
</div>
</label>

1
src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
View file

@ -15,7 +15,6 @@ SyntaxHighlighter.registerLanguage('svelte', svelteSyntax);
SyntaxHighlighter.registerLanguage('scss', scss);
const NewTheme = ({ theme, themeName }) => {
console.log('rerenders NewTheme');
const originalTheme = themeName === 'light' ? lightTheme : darkTheme;
const updates = updatedDiff(originalTheme, theme);