search

onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
2.92k stars 184 forks source link

[feat] Improve the color styling for lightmode on the opening screen #579

Open drfarrell opened 6 days ago

drfarrell commented 6 days ago

Make the colors more agreeable to what we have for darkmode – i.e. make custom styles that look good for this page that is shown when no projects are in Onlook.

image
Kabiirk commented 5 days ago

Hi @drfarrell !

I'd be happy to contribute & close this issue. Can you please assign this to me ?

From what I understand, I'll need to style the UI for app/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx to align more with what is present for the Dark Theme. Do correct me if required.

Best Regards

Kitenite commented 5 days ago

Hey @Kabiirk , yes precisely. There are examples of design token uses that handle both dark and light mode. Our design tokens are defined here: https://github.com/onlook-dev/onlook/blob/827287e23c694d6b998025bfabc3ddf0ae9067a0/app/src/index.css#L5

Kabiirk commented 4 days ago

Thanks, I'll start working on it & share something soon.

Kabiirk commented 2 days ago

Hi ! Just a Sit Rep: I'm still working on this, will make a PR in some time.

Kitenite commented 2 days ago

Thanks for the update @Kabiirk !

Kabiirk commented 1 day ago

Hi guys !

Is it compulsory to add new design tokens to index.css ? I've only made changes to app/.../Create/ChooseMethod.tsx since I assume this change only affects a very specific state of the projects page (when there are no projects), It's going to used be only once in the app.

because of the above, I decided on a single color scheme that works well with both Light & Dark themes.

I tried multiple color combinations & found these to be the most optimal:

Option 1:

Here, I stuck to your original theme, which I think looks good both in light & Dark mode. I just modified the relative color ratios (ratio between blues in New Onlook project wasn't the same as the teals in Import existing project, so I made them more 'harmonious' to each other by making the bg-blue a bit darker).

  1. Light image
  2. Dark image

Option 2:

I thought the above changes were 'too few' for the PR, so I imposter-syndrom-ed myself & made a different color scheme 🙃 Since Gray usually denotes secondary buttons/text etc, I used them as the same, & retained blue as the 'primary' color (for the new onlook project primary button) (primay colors in index.css tokens are white, secondary & tertiary are too close to each other, so I did not use those).

  1. Light image

  2. Dark image

Let me know which you think is better & I'll proceed with the PR.

Kitenite commented 1 day ago

@drfarrell , please give your input. If possible, recommend if we have an existing token. Otherwise I think it makes sense to add once if we need to.

drfarrell commented 5 hours ago

@Kabiirk the colors should be more of a "light-mode" inversion of the dark mode colors. So if the spectrum of colors is 50-950 with

50 100 200 300 400 500 600 700 800 900 950

Then you can probably get pretty close by just flipping the spectrum the other way around for light mode.

950 900 800 700 600 500 400 300 200 100 50

So if something is dark:teal-800 in dark mode, you can assign in teal-200 to get light mode.

This isn't perfect, but will get you closer to what the colors should look like in light mode. Try making these cards feel "light" by first inverting the number for that class in light mode, and then choosing adjacent numbers until it "feels" lighter, because the current configuration is too dark against the white background.

image