Awesome
Note:
⚠️ If you are looking to follow along with the v1.0 tutorial you can find that here⚠️
Zebra is a lightweight, APCA color contrast plugin
What is APCA?
APCA(Advanced Perceptual Contrast Algorithm) is a modern color contrast algorithm that aims to be be perceptually uniform. It is currently being evaluated as a part of the WCAG 3 draught process.
Note: Because APCA is still being evaluated, it is likely that some aspects of the algorithm and scoring system will change between APCA versions.
More info here
Local Development:
Step 1
Download or clone the repo and run npm install
Step 2
- To build:
npm run build - For production:
npm run build:production - For development:
npm run dev.
Step 3
Open Figma and in the menu go to Plugins -> Development -> New Plugin.
Step 4
Choose Link to Existing Plugin and find the zebra manifest.json
How stuff works
This plugin uses a few key dependencies:
- react for rendering the UI.
- apca-w3 for APCA contrast calculations.
- chroma-js to help with some color conversions.
- stitches for css in JS.
- radix-ui for UI components.
- zustand for state management.
There are two dependencies entirely for building and bundling: