Menu

📰
0

Creating a Command Palette Component in Angular (Part 1)

DEV Community: angular·Heghine·about 1 month ago
#KE8LL6nX
#dev#e01b24#class#code#color#input
Reading 0:00
15s threshold

Dynamic Palette Generation Sources: GitHub: https://github.com/ZeroaNinea/Command-Palette-Angular GitHub Pages: https://zeroaninea.github.io/Command-Palette-Angular/ This is the first part of a series where I build a reusable and customizable command palette in Angular. Since the component needs to support different themes, I started by creating a dynamic color palette generator. It takes a set of base colors and produces consistent palettes for primary, secondary, tertiary, neutral, and error roles. Palette Generation I've created a palette generation utility in the project's src/app/shared/utils/palette.util.ts directory. It uses the chroma-js library, and exports a single function createPalette that takes one parameter the base color of a string type, then it returns an object of Palette type. The function generates a scale of 10 colors (from 50 to 900), similar to common design systems. These are then mapped to semantic roles like background, surface, text, and accent.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More