+ Name + | ++ Swatch + | +
---|---|
{name} | +
+
+ {Object.entries(colors).map(([name, value], idx) => {
+ const isHex = value.startsWith("#")
+ const style = window.getComputedStyle(document.body)
+ const variable = value.match(/var\(([^)]+)\)/)?.[1] ?? ""
+ const [h, s, l] =
+ style.getPropertyValue(variable).match(/\d+/g) ?? []
+ const colorHSL = isHex
+ ? hexToHSL(value)
+ : `hsl(${h}, ${s}%, ${l}%)`
+ const colorHex = isHex
+ ? value
+ : hslToHex(Number(h), Number(s), Number(l))
+ return (
+
+
+
+
+ )
+ })}
+ {name} ++ {variable} + +{colorHex} +{colorHSL} + |
+
+ Name + | ++ Size + | ++ Preview + | +
---|---|---|
{name} | ++ {resolvedValue} + | ++ + | +
+ Name + | ++ Size + | ++ Preview + | +
---|---|---|
{name} | ++ {resolvedValue} + | ++ + | +
+ Name + | ++ Size + | ++ Pixel + | ++ Preview + | +
---|---|---|---|
{name} | +{size} | +{pixels}px | +
+
+
+
+ |
+
+ Name + | ++ Property + | ++ Preview + | +
---|---|---|
{name} | ++ {resolvedValue} + | +
+ + {args.children} + + |
+
{notification.title}
+{notification.description}
+Enter your email address.
++ Your message will be copied to the support team. +
+