CSS Chat Summary: 24 June 2021

The meeting took place here on Slack. @danfarrow facilitated and wrote up these notes.

Housekeeping

• Next week’s CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. bugscrub (01 July 2021 @ 8pm UTC) will be run by @danfarrow
• Next week’s Core CSS Chat (01 July 2021 @ 9pm UTC) will be run by @colorful-tones

Discussion: Custom Properties (#49930)

• @danfarrow reported that some progress has been made on the shared document

hsl colours exploration

• @ryelle shared a PR trying out hsl colours with custom properties like blue-100 ,blue-300 etc.
• @colorful tones suggested the approach is restrictive & suggested an approach like this:

--wp-admin--color-neutral-h: 0;
--wp-admin--color-neutral-s: 0%;
--wp-admin--color-neutral-l: 100%;
--wp-admin--color-neutral-hsl:
   var(--wp-admin-color-neutral-h),
   var(--wp-admin-color-neutral-s),
   var(--wp-admin-color-neutral-l));

• @ryelle pointed out that, as the WordPress colour palette doesn’t follow hsl we would need 3 distinct variables for each colour
• @colorful-tones expressed a wish to see the core palette streamlined to the central column of colours and then for the other values to be generated using hsl variants using a core set of custom-properties, or new colours altogether
• @ryelle reported having explored implementing dark mode by inverting colour values e.g. neutral-100 becomes neutral-0, but the results were unsatisfactory
  6
• Perhaps the upcoming lch CSS colour feature will more readily enable this kind of approach

Crossover with editor (GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/) custom-properties

• @joyously asked if the custom-properties would apply to the UIUI User interface editor, and if the custom-property naming would follow the same convention
• @ryelle clarified that currently the editor generates custom-properties like --wp-admin-theme-color for each colour scheme. These properties names will hopefully eventually converge with the new Custom Properties we are proposing

Performance

• @joyously & @colorful-tones wondered if a large number of custom-properties could slow down browsers
• @ryelle suggested that unchanging custom properties (which ours will mostly be) are less likely to have a negative impact

Workflow

• @notlaura had asked about @ryelle’s workflow for adding custom properties has been. @ryelle clarified that she has been going through the values in common.css
• As a way forward to working collaboratively on the PR she suggested each claiming a different file to work through

Cascading custom properties

• @joyously asked if having many :root level properties is better than having a smaller number of properties which are then overwritten with specific selectors for each location
• @ryelle responded that she would like to see how an inheritance based system would work
• @danfarrow observed that the PR uses a form of inheritance by populating some properties with the values of others e.g. --wp-admin-menu--link--background--hover: var(--wp-admin-menu--background);
• @ryelle explained that this will allow adminadmin (and super admin) schemes to set as few variables as possible, but also have the ability for more granular control if they need it
• @joyously clarified that she was thinking more of “a small set of properties that are set for each class representing an area of the page”

CSS Link Share / Open Floor

• @danfarrow shared an article about CSS system colours e.g. Canvas, CanvasText, LinkText, VisitedText (via ShopTalk show)
• @colorful-tones gave props to @ryelle for her excellent work on code exploration for the Custom Properties project – thanks @ryelle!

Thanks everyone!

#core-css, #summary