Fully Accessibility Compatible without sacrificing performance

👀

The website is now fully accessible and supports navigation using a keyboard, as well as voice-over for buttons, icons, and metrics.

(To see this, hit tab key when the page loads)

Release 5.0.1 (d650074)
fix: updated a11y compatibility (77db6c6)
feat: updated color generate logic to invert foreground color when background contrast is below 4.5 (88ece18)
chore: updated README.md (866d98e)
chore: update README.md (d389ae1)

Assets 2

24 Jun 06:29

fluid-design-io

5.0.0

20b2c33

Release 5.0.0

V5 is here 🎉

It's been some time since the last update, and I'm happy to announce that V5 is here. Along with it are new features and performance updates. Over 100+ files were updated, and the color store logic (zustand store) was completely rewritten.

Features

✨ Contrast ratio quick look

You can now hover over the color palette and view the contrast ratio values against the foreground and background of its hue! It also gives you WCAG 2 ratings such as (AAA, AA, and others)

Improved Toolbar UI

The tool plugins are now easier to read, giving you an excellent experience.

Local image color extractor

It was introduced in V4; however, if you haven't tried it yet, here's a video of what it looks like!

CleanShot.2024-06-24.at.01.19.08.mp4

React Compiler

With React Compiler, the site's performance improved dramatically. It is so performant that I have removed the performance checker (to remove certain animations on lower-end devices) completely.

Figma Plugin

Lastly, if you have not checked out the Figma Plugin, which brings all these colors into Figma + VARIABLES support for light/dark mode! Check it out here: Fluid Color Figma Plugin

fix: lint & build error fixes (9d9cbb4)
chore: minor dips updates (62a0bff)
refactor: Update color generation logic and fix linting issues (1fc0977)
refactor: completely rewrote zustand stores (f528c43)
chore: refactored core lib code (54b8e08)
chore: Update color generation logic and fix linting issues (b4d427a)
feat: Add useCopyText hook for copying text to the clipboard (e09b0b8)
feat: separated generate colors function (d5d06f5)
feat: new zustand store hydration method (da1b27d)
chore: linting (7b019da)
chore: core packages update (c820066)
chore: use Sonner toaster instead of reacting toast (a4cca99)
chore: Updated icons (c488608)
chore: Update mobile primary menu component with dropdown menu improvements (dbdb649)
chore: Refactor DiceButton component for improved performance and code readability (46f2eaf)
chore: linting (3d5ac89)
feat: reworked toolbar & plugin code, improved performance & UI (2f41fa8)
chore: linting (50aea58)
fix: reduced code complexity, improved performance (a6445ac)
chore: refactor palette components (d72538d)
feat: added readability hover card (f7bcea1)
chore: Refactor AnalogousMonochromaticPalettes component (0830d7d)
chore: Refactor toolbar component (29faaf8)
chore: Update theme provider import statements (3dd7992)
chore: Refactor site header and site header tabs components (8b830d9)
chore: refactor footer (d7f0f57)
chore: Refactor image-drag-and-drop component (d0799b2)
chore: removed performance checker (30835d7)
chore: Refactor color picker fab button component (d85a1e3)
chore: improved consistency hydrating CSS vars on the mount (1932b93)
feat: add UI blocking when URL search param is valid (6fa2a66)
chore: Fix syntax errors and formatting in root-skip-nav-content.TSX (ed6eb21)
chore: Update layout. tsx file formatting and imports (8f3658f)
feat: make get color name an action instead of API (cd14dbf)
chore: Remove existingColorsOverwritter component (6e0c29c)
chore: remove unnecessary store initializer (e938e13)
chore: lint (f4bcc2b)
fix: performance improvements (c4611bf)
chore: Refactor color palette generation API route (19c71d5)
chore: formatted API code (23b2a98)
chore: move file dir to nested (main) dir (66de982)
feat: Add "How it works" page with color charts and explanations (7ada151)
Update README.md (e981863)