edelstone / material-palette-generator

🎨 Get perfect Material Design palettes from any hex color.
https://materialpalettes.com
210 stars 25 forks source link

Export palette as CSS Variables #11

Closed HotFr1dge closed 1 year ago

HotFr1dge commented 1 year ago

In this Pull Request (PR), I would like to introduce a new feature to this repository that enables exporting the colour palette to CSS variables format. In my opinion, it's useful functionality and may reduce the time spent on copying and pasting all colours from the generator to CSS.

Changes introduced in the Pull Request (PR):

  1. CSS Variable Export Function:

    I added a new function called convertJSONtoCSS that converts the color palette from JSON format into CSS variables. This function processes each color and its shades, creating corresponding CSS variables. For each color, a variable is created in the format --clr-{colorName}-{shadeLabel}: {colorValue};, and a main variable for that color is also defined.

    Example: For the 'Primary' color, we obtain the defined CSS variables:

    --clr-primary-100: #112233;
    --clr-primary-200: #445566;
    --clr-primary: var(--clr-primary-200);
  2. No changes to the color format: The function currently accepts the color palette in HEX format, maintaining consistency with the existing application code.

  3. Testing: I conducted tests for the convertJSONtoCSS function and ensured that it correctly generates CSS variables for each color and its shades from the JSON-format palette. The tests were successful, and the function behaves as expected.

  4. Impact on existing code: The introduced changes do not negatively impact the existing code. The new function has been seamlessly integrated with the existing components and adapted to the current application logic.

  5. How it works in practice? User can export palette and select what type of export would get.

image image

edelstone commented 1 year ago

There is a small UI bug that was introduced by the addition of the select menu on mobile devices. This may not be something that will be easy for you to address, but if you want to try to fix it, go for it. I won't prevent a merge because of this. Notice the overflow of the text area at the bottom of the screen. This is using the iOS simulator on my MBP.

Screenshot 2023-07-27 at 12 07 01 PM
edelstone commented 1 year ago

Thanks @HotFr1dge

edelstone commented 1 year ago

Credit added on about page and README. Thanks again. Really good stuff.