feat: use built in tinycolor
This commit is contained in:
parent
b6e20680ff
commit
64848b2fbf
3 changed files with 12 additions and 32 deletions
|
@ -48,6 +48,7 @@
|
||||||
"@types/react": "^18.2.0",
|
"@types/react": "^18.2.0",
|
||||||
"@types/react-dom": "^18.2.1",
|
"@types/react-dom": "^18.2.1",
|
||||||
"@types/stylus": "^0.48.39",
|
"@types/stylus": "^0.48.39",
|
||||||
|
"@types/tinycolor2": "^1.4.3",
|
||||||
"@types/yazl": "^2.4.2",
|
"@types/yazl": "^2.4.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.1",
|
"@typescript-eslint/eslint-plugin": "^5.59.1",
|
||||||
"@typescript-eslint/parser": "^5.59.1",
|
"@typescript-eslint/parser": "^5.59.1",
|
||||||
|
|
|
@ -59,6 +59,9 @@ devDependencies:
|
||||||
'@types/stylus':
|
'@types/stylus':
|
||||||
specifier: ^0.48.39
|
specifier: ^0.48.39
|
||||||
version: 0.48.39
|
version: 0.48.39
|
||||||
|
'@types/tinycolor2':
|
||||||
|
specifier: ^1.4.3
|
||||||
|
version: 1.4.3
|
||||||
'@types/yazl':
|
'@types/yazl':
|
||||||
specifier: ^2.4.2
|
specifier: ^2.4.2
|
||||||
version: 2.4.2
|
version: 2.4.2
|
||||||
|
@ -600,6 +603,10 @@ packages:
|
||||||
'@types/node': 18.16.3
|
'@types/node': 18.16.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@types/tinycolor2@1.4.3:
|
||||||
|
resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/@types/yauzl@2.10.0:
|
/@types/yauzl@2.10.0:
|
||||||
resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
|
resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
|
||||||
requiresBuild: true
|
requiresBuild: true
|
||||||
|
|
|
@ -56,36 +56,12 @@ const InviteActions = findByPropsLazy("resolveInvite");
|
||||||
const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
|
const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
|
||||||
const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
|
const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
|
||||||
const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
|
const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
|
||||||
|
// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
|
||||||
|
const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
|
||||||
const TextAreaProps = findLazy(m => typeof m.textarea === "string");
|
const TextAreaProps = findLazy(m => typeof m.textarea === "string");
|
||||||
|
|
||||||
const cl = classNameFactory("vc-settings-theme-");
|
const cl = classNameFactory("vc-settings-theme-");
|
||||||
|
|
||||||
const colorNameHexMap = {
|
|
||||||
"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
|
|
||||||
"beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
|
|
||||||
"cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
|
|
||||||
"darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
|
|
||||||
"darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
|
|
||||||
"darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
|
|
||||||
"firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
|
|
||||||
"gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
|
|
||||||
"honeydew": "#f0fff0", "hotpink": "#ff69b4",
|
|
||||||
"indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
|
|
||||||
"lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
|
|
||||||
"lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
|
|
||||||
"lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
|
|
||||||
"magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
|
|
||||||
"mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
|
|
||||||
"navajowhite": "#ffdead", "navy": "#000080",
|
|
||||||
"oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
|
|
||||||
"palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
|
|
||||||
"rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
|
|
||||||
"saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",
|
|
||||||
"tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
|
|
||||||
"violet": "#ee82ee",
|
|
||||||
"wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
|
|
||||||
"yellow": "#ffff00", "yellowgreen": "#9acd32"
|
|
||||||
};
|
|
||||||
|
|
||||||
function Validator({ link }: { link: string; }) {
|
function Validator({ link }: { link: string; }) {
|
||||||
const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
|
const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
|
||||||
|
@ -214,18 +190,14 @@ function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps)
|
||||||
case "color": {
|
case "color": {
|
||||||
const [value, setValue] = useState(themeSettings[name]);
|
const [value, setValue] = useState(themeSettings[name]);
|
||||||
|
|
||||||
let normalizedValue = value;
|
const normalizedValue = TinyColor(value).toHex();
|
||||||
|
|
||||||
if (Object.hasOwn(colorNameHexMap, normalizedValue)) {
|
|
||||||
normalizedValue = colorNameHexMap[normalizedValue];
|
|
||||||
}
|
|
||||||
|
|
||||||
controls.push(
|
controls.push(
|
||||||
<Forms.FormSection>
|
<Forms.FormSection>
|
||||||
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
key={name}
|
key={name}
|
||||||
value={parseInt(normalizedValue.substring(1), 16)}
|
value={parseInt(normalizedValue, 16)}
|
||||||
onChange={v => updateSetting(name, "#" + (v?.toString(16).padStart(6, "0") ?? "000000"), setValue)}
|
onChange={v => updateSetting(name, "#" + (v?.toString(16).padStart(6, "0") ?? "000000"), setValue)}
|
||||||
/>
|
/>
|
||||||
</Forms.FormSection>
|
</Forms.FormSection>
|
||||||
|
|
Loading…
Reference in a new issue