103 lines
4.5 KiB
TypeScript
103 lines
4.5 KiB
TypeScript
import { isCssFunctionalColor } from './cssFunctionalColor'
|
|
|
|
const HEX3_RE = /^#[0-9a-f]{3}$/i
|
|
const HEX6_RE = /^#[0-9a-f]{6}$/i
|
|
const HEX8_RE = /^#[0-9a-f]{8}$/i
|
|
const COLOR_KEY_NAMES = new Set([
|
|
'background', 'border', 'color', 'fill', 'foreground', 'muted', 'primary',
|
|
'secondary', 'stroke', 'tint',
|
|
])
|
|
const COLOR_KEY_SUFFIXES = ['-color', '_color']
|
|
const COLOR_KEY_PREFIXES = ['accent']
|
|
const COLOR_KEY_SUBSTRINGS = ['colour']
|
|
const COLOR_VALUE_TESTS: Array<(value: string) => boolean> = [
|
|
(value) => HEX3_RE.test(value),
|
|
(value) => HEX6_RE.test(value),
|
|
(value) => HEX8_RE.test(value),
|
|
isCssFunctionalColor,
|
|
(value) => NAMED_COLORS.has(value.toLowerCase()),
|
|
]
|
|
|
|
/** CSS named colors (lowercase). */
|
|
const NAMED_COLORS = new Set([
|
|
'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black',
|
|
'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse',
|
|
'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan',
|
|
'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta',
|
|
'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen',
|
|
'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink',
|
|
'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen',
|
|
'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow',
|
|
'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender',
|
|
'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
|
|
'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon',
|
|
'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue',
|
|
'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine',
|
|
'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue',
|
|
'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream',
|
|
'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange',
|
|
'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred',
|
|
'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple',
|
|
'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell',
|
|
'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen',
|
|
'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white',
|
|
'whitesmoke', 'yellow', 'yellowgreen',
|
|
])
|
|
|
|
/** Check if a string is a valid CSS color value. */
|
|
export function isValidCssColor(value: string): boolean {
|
|
if (!value || typeof value !== 'string') return false
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return false
|
|
return COLOR_VALUE_TESTS.some((testColorValue) => testColorValue(trimmed))
|
|
}
|
|
|
|
/** Expand #rgb to #rrggbb. */
|
|
export function expandShortHex(hex: string): string {
|
|
if (!HEX3_RE.test(hex)) return hex
|
|
const r = hex[1], g = hex[2], b = hex[3]
|
|
return `#${r}${r}${g}${g}${b}${b}`
|
|
}
|
|
|
|
/**
|
|
* Convert a valid CSS color to #rrggbb format for use with <input type="color">.
|
|
* Returns null if conversion is not possible without DOM.
|
|
*/
|
|
export function toHexColor(value: string): string | null {
|
|
const trimmed = value.trim()
|
|
if (HEX6_RE.test(trimmed)) return trimmed.toLowerCase()
|
|
if (HEX3_RE.test(trimmed)) return expandShortHex(trimmed).toLowerCase()
|
|
if (HEX8_RE.test(trimmed)) return trimmed.slice(0, 7).toLowerCase()
|
|
// For rgb/hsl/named, use an offscreen canvas if available
|
|
if (typeof OffscreenCanvas !== 'undefined') {
|
|
return canvasColorToHex(trimmed)
|
|
}
|
|
return null
|
|
}
|
|
|
|
function canvasColorToHex(color: string): string | null {
|
|
try {
|
|
const canvas = new OffscreenCanvas(1, 1)
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return null
|
|
ctx.fillStyle = '#000000'
|
|
ctx.fillStyle = color
|
|
const result = ctx.fillStyle
|
|
if (typeof result === 'string' && result.startsWith('#')) {
|
|
return result.toLowerCase()
|
|
}
|
|
return null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
/** Check if a property key name suggests a color value. */
|
|
export function isColorKeyName(key: string): boolean {
|
|
const lower = key.toLowerCase()
|
|
return COLOR_KEY_NAMES.has(lower)
|
|
|| COLOR_KEY_SUFFIXES.some((suffix) => lower.endsWith(suffix))
|
|
|| COLOR_KEY_PREFIXES.some((prefix) => lower.startsWith(prefix))
|
|
|| COLOR_KEY_SUBSTRINGS.some((part) => lower.includes(part))
|
|
}
|