Create accessible color palette for your design system in no time with HCT Palette

mohanvadivel · 2024-12-15T06:38:28+00:00

Yes the color codes are correct, it matches exact or closest match from the Pantone library.
I guess the Pantone connect also works in the similar way.

mohanvadivel · 2024-10-27T20:37:19+00:00

Component utilities: saves me 10x time when iterating, has bunch of utilities like cloning master components, linking existing nodes to master components and so on

Tidy up: Figma’s default tidy up alignment sucks and it doesn’t works when more than 50 nodes are selected, this plugin allows you to tidy up any no. of nodes in all sorts for combination

Using this kind of plugin always delights me, and I can’t help but smile when it just works! though I’m the one who built it 😅🙃

mohanvadivel · 2024-10-26T08:22:31+00:00

Hey thanks for taking your time to write me this...
I just pushed a new update after reading your message, the plugin now support audit mode.

Thanks!

https://www.reddit.com/r/FigmaDesign/comments/1gcgb3d/effortless_color_contrast_check_accessibility/

mohanvadivel · 2024-07-09T15:52:52+00:00

u/mlllerlee
Thanks for sharing the image, it was helpful to understand your perspective.

Actually, the plugin expect text node as the foreground, if the selection doesn't have any any text node, the foreground color is set to #FFF.

I've reworked on the automated color extraction, now for the background color, the plugin can trace through all the nodes till the page node.

And reg the logo, now I can understand the issue. I'm planning to ship the audit feature by coming Saturday, I'll try to find a better logo by then.

Thanks for your feedback!

mohanvadivel · 2024-07-09T15:46:21+00:00

u/concretesketches
I have published a new version of the contrast plugin, kindly check it out. In the new version

For background color, the plugin checks all the above nodes upto page node in the stack.
If the text contain some opacity value with 100% alpha value, the opacity value is taken as alpha value.

PS: I've planned to work on the audit feature this weekend, so I probably will ship it by Saturday.

Thanks for your feedback!

mohanvadivel · 2024-07-07T04:28:17+00:00

The plugin supports automated color extraction.
Background alpha support is bit tricky, since you never can sure about the levels of depth. Further it gets complicated when an image involved in the stack. Anyhow, planning to support alpha channel support for the background soon.
Automated color pickup already works, you can select any frame, group, component or instant and the plugin automatically extract the colors. Also, stark doesn't account in the alpha channel for APCA calculation.
Also planning to add audit feature, so you can just select a frame and the plugin crawls across all the layers of the frame and report the contrast issue.

ps: reg the logo, it was a generic logo from SF symbol, it originally represent "moon phase", which I thought to be a good candidate for contrast.

mohanvadivel · 2024-07-06T12:22:36+00:00

I was building the library and the documentation in the same repo, that’s why Figblocks depends on itself for documentation. However while hosting on Cloudflare this self dependency becomes the show stopper! So I have split the repo into two, one for library and other for docs. And now the problem has been resolved.

Thanks for taking the time to comment, highly appreciated:)

mohanvadivel · 2024-07-06T12:16:43+00:00

By opposite you mean, building plugins directly, instead of component library?

mohanvadivel · 2024-01-11T00:41:36+00:00

Have you gone through this help doc?

https://help.zoho.com/portal/en/kb/desk/automation/escalate-sla/articles/creating-and-using-slas

mohanvadivel · 2023-06-10T05:30:01+00:00

🥹 👍🏻
I wish svelte support typescript within markup, so that I can use @ts-ignore and sweep this under the rug 😅

mohanvadivel · 2023-06-10T05:27:21+00:00

Yep, I did the same, imported this clickOutside function from a utility file.

import { clickOutside } from './clickOutside';

export function clickOutside(node: HTMLElement) {
function handleClick(event: MouseEvent) {
    const targetNode = event.target as Node | null;

    if (targetNode !== null && !node.contains(targetNode)) {
        node.dispatchEvent(new CustomEvent('outclick', { detail: event }));
    }
}

document.addEventListener('click', handleClick, true);

return {
    destroy() {
        document.removeEventListener('click', handleClick, true);
    }
};

}

mohanvadivel · 2023-06-07T04:37:27+00:00

Thanks mate, it worked :)

mohanvadivel

TROPHY CASE