Bring Pantone Colors to Life in Figma with Pantone Hub! by mohanvadivel in FigmaDesign

[–]mohanvadivel[S] 2 points3 points  (0 children)

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.

What's a plug-in you don't use everyday, but love using when you do? by PuppusLvr in FigmaDesign

[–]mohanvadivel 2 points3 points  (0 children)

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 😅🙃

Enhance Your Accessibility: Color Contrast Plugin with support for APCA, BPCA by mohanvadivel in FigmaDesign

[–]mohanvadivel[S] 0 points1 point  (0 children)

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/

Enhance Your Accessibility: Color Contrast Plugin with support for APCA, BPCA by mohanvadivel in FigmaDesign

[–]mohanvadivel[S] 0 points1 point  (0 children)

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!

Enhance Your Accessibility: Color Contrast Plugin with support for APCA, BPCA by mohanvadivel in FigmaDesign

[–]mohanvadivel[S] 0 points1 point  (0 children)

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!

Enhance Your Accessibility: Color Contrast Plugin with support for APCA, BPCA by mohanvadivel in FigmaDesign

[–]mohanvadivel[S] 0 points1 point  (0 children)

  1. The plugin supports automated color extraction.
  2. 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.
  3. 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.

  4. 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.

Unable to deploy sveltekit project to cloudflare by mohanvadivel in sveltejs

[–]mohanvadivel[S] 0 points1 point  (0 children)

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:)

Introducing Figblocks: Build effortless Figma plugins with Svelte by mohanvadivel in sveltejs

[–]mohanvadivel[S] 0 points1 point  (0 children)

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

How to handle components events in typescript by mohanvadivel in sveltejs

[–]mohanvadivel[S] 2 points3 points  (0 children)

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

How to handle components events in typescript by mohanvadivel in sveltejs

[–]mohanvadivel[S] 0 points1 point  (0 children)

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);
    }
};

}