Color Picker Sketch [WIP]

Reading Sketch preferences for colors

This visualization captures a software designer’s preferred color settings for Sketch by reading them directly from the application’s saved user defaults. The code uses the `NSUserDefaults.standardUserDefaults()` API to retrieve the stored `colorForMeasurements`, `colorForFlows`, and `colorForSnapsAndGuides` preferences, then decodes the binary data with `NSKeyedUnarchiver`. The resulting color values are likely rendered as a palette or swatches, revealing the user’s chosen hues for interface measurement overlays, flow arrows, and snapping guides, all without manual input.

61% match

Perceptual Color Picker Prototype

This interactive prototype demonstrates picking colors in the HCL color space, where hue, chroma, and luminance sliders adjust a background color while a text field displays the current RGB hex value. Built with D3.js v5 and Topologica for reactive data flow, the visualization uses `d3.hcl` to convert slider inputs into color strings and updates the page background and form fields in real time. Users can also paste a hex color into the text field to sync the sliders, enabling perceptual adjustments like changing hue while preserving luminance. The sliders are bound via the `input` event, and Topologica manages the dependencies between color components, slider positions, and output display.

CCurran Kelleher

60% match

Attach modal to Sketch document

This example shows how to attach a modal alert dialog to the active Sketch document window using the Sketch scripting API. It creates an `NSAlert` with OK and Cancel buttons and presents it as a sheet via `beginSheetModalForWindow:completionHandler:`. The completion handler uses a block created with `__mocha__.createBlock_function` to process the return code, logging success or cancelation. The code manages asynchronous execution through `coscript.createFiber()` and cleans up the fiber after the dialog closes.

59% match

Progressbar modal

This example demonstrates a modal progress bar displayed over the main application window, using a native macOS sheet to block interaction while a short task runs. The code creates an `NSProgressIndicator` with a blue tint, embeds it in an `NSWindow` configured as a document-modal sheet, and attaches it via `beginSheet_completionHandler` on `NSApplication.sharedApplication().mainWindow()`. The progress animation starts immediately, and the sheet closes after a three-second delay using `setTimeout` and `endSheet`, illustrating Apple’s AppKit APIs in JavaScript via JSTalk-style syntax.

58% match

The Coloring Book

An interactive coloring page displays a detailed SVG illustration split into outlined regions in a `Color` group, which users fill by clicking individual paths. The application lets visitors choose from a fixed palette of 24 colors, apply a random color to every region, clear all fills to white, or download the resulting SVG. Built with React for structure, it uses the Canvas library to load the SVG, GSAP TweenMax for smooth fill transitions and rollover scaling, and react-color's SketchPicker for color selection. The page loads a remote SVG coloring book asset and renders it within a stylized holder.

Sslawson48

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

A Sketch snippet to copy global colors to the pasteboard

This sketch copies all global color assets from a Sketch document to the clipboard as CSS rules, converting each color to hex and generating class names. It uses the Sketch JavaScript API (`sketch.globalAssets`) to access color assets and `NSPasteboard` to write the formatted string. The code iterates through every saved color, builds a CSS block with a `.colorN` selector or the asset’s name, and trims trailing whitespace before showing a confirmation message.

Trigger a Sheet alert

This example demonstrates a temporary modal progress bar that appears over the Sketch document window, indicating an ongoing sheet operation. The script uses the `sketch` API to access the selected document and its window controller. It constructs a 200x100 pixel `NSWindow` with a title and modal style, adds an `NSProgressIndicator` that starts animating in blue, and begins a sheet session with `beginSheet_completionHandler`. After a five-second timeout, the sheet is dismissed with `endSheet`, completing the interaction.