CSS Chat Summary: 24 June 2021

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


Discussion: Custom Properties (#49930)

hsl colours exploration

--wp-admin--color-neutral-h: 0;
--wp-admin--color-neutral-s: 0%;
--wp-admin--color-neutral-l: 100%;
  • @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
  • 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


  • @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


  • @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

Thanks everyone!

#core-css, #summary