Change CSS variable names + create a themer #109
|
@ -29,13 +29,22 @@ export default function Themer() {
|
|||
</div>
|
||||
<div className={styles.palette}>
|
||||
{Object.entries(palette).map(([key, value]) => {
|
||||
const color =
|
||||
value.length === 4 && value.startsWith("#")
|
||||
? `#${value[1].repeat(2)}${value[2].repeat(2)}${value[3].repeat(
|
||||
2
|
||||
)}`
|
||||
: value;
|
||||
|
||||
const isValidColor = color.startsWith("#") && color.length === 7;
|
||||
|
||||
return (
|
||||
<div key={key}>
|
||||
<Input
|
||||
id={`color-${key}`}
|
||||
type="color"
|
||||
className={styles.colorSelector}
|
||||
value={value}
|
||||
value={color}
|
||||
onChange={(event) =>
|
||||
context?.setTheme({ [key]: event.target.value })
|
||||
}
|
||||
|
@ -50,11 +59,13 @@ export default function Themer() {
|
|||
</Button>
|
||||
<code className={styles.colorName}>
|
||||
<label htmlFor={`color-${key}`}>
|
||||
{!isValidColor && "🚧 "}
|
||||
{key
|
||||
.slice(2)
|
||||
.split("-")
|
||||
.map((word) => word[0].toUpperCase() + word.slice(1))
|
||||
.join(" ")}
|
||||
{!isValidColor && " 🚧"}
|
||||
</label>
|
||||
</code>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue