search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.1k stars 322 forks source link

NEXT: New Theme Generator #1142

Open endigo9740 opened 1 year ago

endigo9740 commented 1 year ago

This will act as a hub to centralize this information.

UX Flow

Screenshot 2024-09-16 at 1 37 37 PM

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

Generator:

Theme:

Documentation:

Community Requests

The following requests have come from the community and are under consideration:

Bugs and Issues

References

Theme Inspiration

See Also

The following updates will likely need to be handled in coordination.

Resources

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

Sarenor commented 1 year ago

We might need to add a step 0) Refactor the theme generator to be more modular and separated.

Sarenor commented 1 year ago

By default the Theme Generator is set to the colors of the skeleton theme.

It would be nice if the Theme Generator would be set automatically to the properties of the selected theme. This would make it easy to tweak one of the provided themes to your liking.

As noted here: https://github.com/skeletonlabs/skeleton/issues/1179

endigo9740 commented 1 year ago

Reference: https://uicolors.app/create

endigo9740 commented 1 year ago

UI layout issue: https://github.com/skeletonlabs/skeleton/issues/1750

endigo9740 commented 1 year ago

Ideas: https://www.youtube.com/watch?v=YWVneCWIfoE

Elliott-Green commented 1 year ago

Theme Contributions

I'm imagining a comprehensive list of community approved themes via a new theme channel. Get enough thumbs up on your theme with a PR, gets merged and shown on the community themes. Theme's can get dropped into a structure in the community themes repo, like.

/themes
    /skeleton
        skeleton-theme.ts

Then the client would have a grid layout of like a preview of different components/colors. Showing the general look and feel as much as possible within a small grid element. Using table and pagination, many themes can be loaded onto a single route. Potentially clicking onto the theme, would open a child route /themes/:themeTitle, showing a dummy page with more components spaced out on a full page, rather than being a squished grid element.

Marketing

Theme Thursdays could be a thing whereby you take some decent recent themes and just market how nice they are on socials.

Font-url hacks

Fonts are moved to userland which is fine. Wondering if theres any hacks with the google font-urls so that users can preview a bunch of fonts all at the same time from the theme generator. something like, can I dynamically place a font-url somewhere in the theme generator just to check a font quickly.

post.css within theme generator

Some themes like skeleton have a gradient mesh applied with post.css at the generator level. It would be cool to have a panel where we can throw a potential mesh into to see the results.

ak4zh commented 1 year ago

Adding another idea I was thinking about once theme generator is turned into a full fledge web app. Adding a feature to generate and share the themes via a url.

This can be done without any database by encoding the final css into a base64 string and adding it to url params, so users can create themes and share it easily with a sharable url.

endigo9740 commented 1 year ago

Adding another idea I was thinking about once theme generator is turned into a full fledge web app. Adding a feature to generate and share the themes via a url.

This is one of my ideas too. Though I'm leaning towards the database approach because I'd like users to be able to self maintain a series of themes for themselves, or share those with others. But themes will always be public to help build a community approach to this.

endigo9740 commented 1 year ago

Theme inspiration:

https://github.com/rose-pine/rose-pine-theme https://github.com/catppuccin/catppuccin#-palette

Use these to test extending beyond the standard format (more colors, etc)

endigo9740 commented 1 year ago

Note:

Make considerations for auto-generating the "on" color per EVERY shade per each color. For example, note how the black/white text is set at different vertical levels in this image:

image

Potential UI: image

We should be able to programmatically determine and set this automatically as a foundation. But obviously still allow users to manually override these if they so choose.

Elliott-Green commented 1 year ago

Want : Theme Generator makes a nice theme for light mode, switch to dark mode want to modify some colours, but within the theme generator pallete. Maybe a button to sticky save light mode colours whilst selecting a new dark mode pallete

endigo9740 commented 1 year ago

Another feature request to consider: https://github.com/skeletonlabs/skeleton/issues/2011

Typogram commented 1 year ago

TL;DR: The current theme customization process in Skeleton UI is prolonged due to the need to switch between the documentation site and the dev environment. I propose integrating a live Themer component directly into the core library, allowing developers to see theme changes immediately, enhancing the customization process and overall user experience.

Hello Skeleton UI maintainers,

Firstly, I would like to commend the team on the theme generator provided on the documentation site. It's a great tool and I've found it extremely useful.

However, I noticed that the process of using the theme generator and integrating it into my development environment can be a bit cumbersome. The current flow involves tweaking the theme on the documentation site, copying the configuration, pasting it into my development environment, seeing how it looks, and then repeating this loop if further modifications are needed. The feedback loop feels prolonged and sometimes hinders the rapid prototyping experience.

To address this, I've developed a local "Themer" component in my setup, which allows me to design and tweak the theme live on my website. The immediacy of this tool has significantly improved my theming process.

I believe that this Themer component could be of immense value to other developers using Skeleton UI. Therefore, I would like to suggest integrating a themer component similar to my solution into the core Skeleton UI library. This would enable developers to have a quicker feedback loop when designing themes and make the customization process even more seamless.

Benefits of this proposal:

  1. Quick Feedback Loop: Developers can immediately see the impact of their theme changes.
  2. Ease of Access: Integrating the Themer directly into the core library means that developers won't need to switch contexts between the documentation site and their dev environment.
  3. Improved User Experience: By streamlining the theming process, we can potentially attract more users to Skeleton UI, given the enhanced user experience.

If the team is interested, I'm more than willing to share my implementation of the Themer component and discuss possible ways to integrate it into Skeleton UI.

Thank you for considering my suggestion. I genuinely believe this feature can bring substantial value to the Skeleton UI community.

My implementation of the themer can be seen here: https://dev.icondash.com/ (it will be removed in the future after the development is done)

gzuuus commented 1 year ago

Hi, first of all thanks to the maintainers of this project, I started using skeleton in my project ~3 weeks ago and I love it! Congratulations to all the maintainers and contributors!

I recently opened an issue contemplating the possibility of adding the option to transition between theme changes, I think it can be nice and useful for some projects.

2209

On the other hand I've read in this issue several times the idea of creating themes that you can then share. It's precisely one of the goals of the project I'm working on. My project is an application to share lists of links in which I use a new decentralized communication protocol, in which I am developing, very promising, this protocol is called 'nostr'. In my application I will allow my users to generate custom themes and they will be stored in a json object that will conform a nostr event. This allows users to save their custom themes in the network, and they will be able to share them as they will be public, and others will be able to try them live and even 'fork' them to use.

If you are interested I can develop the explanation a bit more, or keep you updated on this feature when it is developed.

endigo9740 commented 10 months ago

Note that I've updated the original post at the top to conform to the new v3 format. We are still accepting new feedback and requests, but please make sure to read through this post first to ensure your request is not already present. Thanks!

Attention @ryceg

Hugos68 commented 10 months ago

What kind of database will this include, and what would this look like? Will it include authentication (to store themes per user for eg)?

If so I'd happily recommend Supabase to do this with, it's free (hobby) tier is very generous and will work just fine with upto 50.000 users: https://supabase.com/pricing

I also have a lot of experience with supabase combined with sveltekit so I could definitely help out in this area.

It would be great if we could get some schematic for the database design and requirements list.

endigo9740 commented 10 months ago

@Hugos68 likely something like that. Supabase, Prisma, etc. I'm a frontend and design guy, so backend is not my jam. We'll likely bring in the big guns to help decide on the specific tech. I'm sure Rhys and I would appreciate the help though!

zadamg commented 10 months ago

just want to say i'd like the ability to change shadows as well. also, it'd be nice to have something like the basic https://ui.shadcn.com/ without having to create it. I know i've struggled with this debate in creating my startup because there aren't any "normal/basic" options in the current them list.

TazorDE commented 8 months ago

Disregarding previous comments here are some things I'd like to see based on the current iteration of the theme generator in feat/next-theme-generator:

Please treat this as a wish-list as this is just a list of small things I noticed when trying out the current iteration and comparing with theme customization I had to do while working on work projects.

endigo9740 commented 8 months ago

@TazorDE just FYI the generator will likely always have safety rails, to help folks that may not be super design savvy. However, every single setting will be manually customizable in the theme code itself. For the most power-focused power users, this will likely always be the best option for that. I'd recommend tapping the Code view and scanning through the properties. Most are fairly semantic, but I do plan to have a breakdown of each in the doc like so: https://www.skeleton.dev/docs/themes#css-custom-properties

That said, I do think we should expand the canned options for several settings in the new generator. I've gone with very conservative options to get us up and running for now though, mostly due to time constraints.

I like the options you've presented for additional theme settings to add though. I definitely agree on text highlighting, and I think we should likely also expand this to scrollbars too! This has been highly requested for a long while, and browsers have recently standardized on a single approach.

When it comes to more typography settings, I'm not sure if it will be reasonable to ask folks to set these for every HTML element, but do you have control over the raw type scale values via utility classes like .type-scale-1, which can act as privatives for creating semantic classes in your project. Imagine something like:

.headline { @apply type-scale-5 text-red-500 italic; }
<h2 class="headline">...</h2>

This is already built in! https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/utilities/typography.ts#L7

TazorDE commented 8 months ago

just FYI the generator will likely always have safety rails, to help folks that may not be super design savvy. However, every single setting will be manually customizable in the theme code itself. For the most power-focused power users, this will likely always be the best option for that.

@endigo9740 I am aware, as that is the way I did it in the past. However I think an advanced mode might be a good middle ground for providing some more detailed styling options for power users.

That said, I do think we should expand the canned options for several settings in the new generator. I've gone with very conservative options to get us up and running for now though, mostly due to time constraints.

If you want we can connect on this as I have now worked with several designs that were not created with Skeleton in mind, so I could definitely provide some insights to what might be possible values.

When it comes to more typography settings, I'm not sure if it will be reasonable to ask folks to set these for every HTML element, but do you have control over the raw type scale values via utility classes like .type-scale-1, which can act as privatives for creating semantic classes in your project. Imagine something like:

I know. This suggestion is kind of a wild one. But as said previously, on more than one occasion I had to build custom values for each typographic HTML element, so it might be an option for an advanced mode. (I guess I've now volunteered to build that one if it is desired by more people)

Sarenor commented 8 months ago

Bring back the randomize all (colors) Button!

Hugos68 commented 8 months ago

Bring back the randomize all (colors) Button!

Ideally with locks!

endigo9740 commented 5 months ago

Bohdan reported that the Cerberus theme's contrast colors don't match 1:1 with the theme generator.

The reason for this is the theme generator was updated to include a algorithmic manner for validating a11y contrasting tones. However, the preset themes currently shipped within the v3 Tailwind Plugin have not yet been updated since this occurred.

For now, please favor the colors shown in the theme generator. And expect most if not all themes to be re-generated at some point in the future as we continue to refine and improve the generator and theme format.

ValipPowa commented 5 months ago

Docs is mismatch theme docs

image should be import yourThemeNameHere from './theme-custom.ts';

endigo9740 commented 2 months ago

Let's review and compare this to Chroma.js:

https://leonardocolor.io/

mmailaender commented 1 month ago

Maybe interesting for the future: An alternative to Zod that reached 1.0 Milestone with better performance and DX: ArkType 🙂,

TazorDE commented 1 month ago

Based on my recent testing I've come up with some more feature requests:

endigo9740 commented 1 month ago

Note that a new round of updates to the Themes and Generator dropped today. Details can be found here:

With this, I'm going to move this ticket into the Future Updates milestone. We'll return to this post-launch of Skeleton v3.