Tidy and extend the colour theming for the website and MyMeta

[HHH-GH]

What would you like to be added?

After a tidy up to remove any hex colours from the web codebase, we would like to add a way to make UI elements themeable. (Mainly the colour parts but also maybe the fonts and their colours)

The general plan:

1. Find all the hex codes and replace with colors.ts equivalents
2. Make a list of elements that can have themed colours
3. Think of sensible names for the parts of those elements that have themed colours e.g. tileBackground
4. Add those names in colors.ts e.g. tileBackground = purpleDark
5. Replace throughout codebase e.g. purpleDark in tiles is changed to tileBackground

How that would work in practice Old way: (for e.g.)

<MetaTile bg='purpleDark' ...

In the old way, if we want to change the background colour of MetaTile components we need to replace purpleDark throughout the codebase.

New way: (for e.g.) In colors.ts, tileBackground is set to purpleDark.

<MetaTile bg='tileBackground' ...

In the new way, we would need to change only the setting in colors.ts e.g. tileBackground is changed equal superPink and the background colour of the MetaTile components all turn super pink.

Why is this needed?

This is needed because:

• Some hexadecimal colour codes have appeared in the web codebase, and we should instead be using the names from colors.ts in the design system.
• Adding theme-style names for colours will help make MyMeta easily themeable

Ref: https://discord.com/channels/629411177947987986/629412800346849302/1029271188091977738

[HHH-GH]

I'd like to collect opinions on which elements should be themed, and which parts of them should be themeable.

Post here or in the Discord and I'll collect them.

[peth-yursick]

Hey! Love this idea but there are also #1160, #1157 & #1229 already about seemingly the same thing.. We should probably consolidate these somehow @dysbulic, not sure which should be the one kept?

[HHH-GH]

This one could be cut down to just #1 then?

On Oct 15, 2022, at 19:08, peth-yursick @.***> wrote:

 Hey! Love this idea but there are also #1160, #1157 & #1229 already about seemingly the same thing.. We should probably consolidate these somehow @dysbulic, not sure which should be the one kept?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[dysbulic]

[Of] #1160, #1157 & #1229 … which should be kept?

#1160 is something that comes after the display characteristics have been simplified. It would take the work from #1157 and allow specification of a user-defined style overriding the extracted display properties.

#1229 and this one, #1418, seem like duplicates of a combination of #1160 & #1157, and could likely be folded into #1157.

@HHH-GH, one wrinkle in how these styles are defined is styles defined in the theme are easily overridable. Characteristics that are defined on the element itself, however, will take precedence over the theme. I don't know if there is a more Chakraesque way to do it, but if I were writing this as traditional HTML, I'd give the elements a class name and theme that class.

Also, part of what needs to be done is to check that the components like MetaButton are consistently used.

[HHH-GH]

I don't know if there is a more Chakraesque way to do it, but if I were writing this as traditional HTML, I'd give the elements a class name and theme that class.

Agreed.

I'm looking at the theme settings in the design-system

...

There are a couple of class names in theme/index.ts

What if I do "1. Find all the hex codes and replace with colors.ts equivalents" first and we figure out the rest later?

[peth-yursick]

#1229 and this one, #1418, seem like duplicates of a combination of #1160 & #1157, and could likely be folded into #1157.

Is there info that should be copy pasted & description updated in #1157 or is it good to just mention #1229 & #1418 inside #1157 to close them?

I'm looking at the theme settings in the design-system

Since you mention the design system, reminds me of this open issue about implementing a design system #1108.. Meaning, I'm not sure the design system you linked was ever finished

[dysbulic]

Is there info that should be copy pasted & description updated in #1157 or is it good to just mention #1229 & #1418 inside #1157 to close them?

I closed #1157 and #1229 in favor of this issue.

Since you mention the design system, reminds me of this open issue about implementing a design system #1108. Meaning, I'm not sure the design system you linked was ever finished.

It exists. We pulled out Storybook a couple months ago because no one was updating it, but there's still a bunch of components.

[HHH-GH]

Here's where I'm at with this one.

I'm about to start looking for hex/rgb codes in the codebase.

I've got a page that prints all the MetaColors so I can match them up.

Light

Dark

[HHH-GH]

That page is now hosted at Vercel

https://mg-frontend-cheatsheet.vercel.app/

I'll use it to help search/replace hex colours in the database, get a closer match if there are hex colours not in the design system, and maybe think up some new names for those colours if there is no good match