CSSCSS Cascading Style Sheets. Chat Summary: 11th June 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1591909237318500

I (@notlaura) facilitated the meeting.

Discussion on color naming with the design team

We started out by reviewing some goals of this color scheme initiative with regards to wp-adminadmin (and super admin):

1. Easily create full-feature color schemes that apply to the entire wp-admin (e.g. dark mode)
2. Improve existing wp-admin CSS

@joyously asked if this applies to properties like CSS filters and blend mode, and @kburgoine and I indicated that it would likely be limited to defining a base color palette and color values.

I then asked how the designers currently name colors in designs – @michael-arestad replied that he uses hex codes, and for colors named according to intent, it is only the accent color. @ryelle linked to this WordPress Colors CodePen. @nrqsnchz agreed that we should aim to use names that specify the use of the color vs. the color itself.

@michael-arestad linked to a couple of example projects where colors were organized into “sets”: the main colors (5-10 most common), a primary accent color, additional accent colors. Here is one example with multiple levels of abstraction and an older version.

I mentioned another goal – or perhaps an elaboration of what “easily create color schemes” means – is that creating a new color scheme should be a matter of updating a predefined set of variables with different colors values. One should not have to write any new CSS (save custom property definitions at a high level) to create a new color scheme, and to achieve this, multiple levels of abstraction will be required (e.g. assigning #FFF to --button-color, and thencolor: var( --button-color );).

@michael-arestad noted the importance of providing a range of lighter/darker versions of a colors to ensure folks aren’t coming up with slightly different shades of the same color, even though providing those options is important.

We discussed a next step of annotating some designs with potential color palettes and names – for example, a screenshot of wp-admin with the default color scheme and a screenshot in dark mode, with a Figma palette with the colors used in each. The intent of the annotations is not to determine specific color names yet, but to get an idea of the higher level “color buckets” or categories (e.g. color-primary, color-accent), and the UIUI User interface elements they may be applied to (e.g. --button-text-color, --sidebar-background-color).

Next, we talked about options for naming the variations in the colors – a couple of approaches mentioned were using terms lightest/lighter/light/dark/darker/darkest or using number 100-900 to allow for middle ranges. @ryelle mentioned another approach where 50 was used as a cutoff and above or below 50 indicated contrast with white/black, and we discussed the ideal of a naming system that would help ensure proper contrast ratio between colors. I shared an example of how we are handling our color naming at my job.

To conclude the meeting, I re-iterated / refined the goals of the color scheme initiative:

• Creating a new color scheme should be similar to filling out a form with color values
• All colors in the wp-admin should be controlled by the color schemes
• Reduce the number of colors in use by providing default color palettes with varying shades

Our next steps are to start determining the “color buckets” and categories/mappings of the UI abstractions that will be used to apply the colors. We can start this process by annotating screenshots two screenshots (one of light mode and one of dark mode) with potential color names and corresponding color palettes.

Help Needed
Is someone with design knowledge up for creating these annotations? @michael-arestad offered to provide guidance and access to Figma where needed.

Latest and Greatest in CSS Link Share

@kburgoine shared Hybrid positioning with CSS variables and max() from Lea Verou (who’s website is using the default theme to great effect! 😄).

That was all for this week!

#summary #core-css