Wishlist for Pico Colors: (surface) color tones and OKLCH

[Leftium]

There are two color-related features I wish Pico had:

1. (Surface) color tones

• Pico seems to already use a similar concept internally; it would be nice if they were officially exposed/documented. For example, I often borrow colors like --pico-muted-color and --pico-card-sectioning-background-color
• I called this feature "surface colors" based on open-props color schemes:
  • https://codepen.io/argyleink/pen/XWaYyWe
  • See the CSS example in "Color 101: Themes" here: https://open-props.style/#colors
• Solarized also has a similar concept: https://ethanschoonover.com/solarized/#usage-development
• Basically:
  • Pico only offers a single tone for foreground/background color.
  • It would be nice to have at least two levels of tones
    • Primary content/body text
    • Secondary content/comments
    • Emphasized content
    • Four "surfaces" to layer/partition/distinguish UI elements

2. OKLCH colors

• OKLCH is a more intuitive way to express colors in CSS: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
• OKLCH opens up support for more vibrant/saturated color gamuts currently not supported
• OKLCH's perceived lightness feature would make "surface colors" much easier to implement, if not unnecessary
• (It may be possible to entirely replace Pico's hand-selected colors with automated OKLCH lightness gradients.)
• Minimally, this would mean adding support here:

  PicoCSS/scss/colors/utilities/_utils.scss

  Lines 38 to 47 in 324e84f

  	// Returns the color as RGB, HSL or HEX
  	@function display-color($color) {
  	@if map.get(settings.$palette, "export-as") == "rgb" {
  	@return display-rgb($color);
  	}
  	@if map.get(settings.$palette, "export-as") == "hsl" {
  	@return display-hsl($color);
  	}
  	@return $color;
  	}

• Additionally, it would be nice if Pico colors were adapted to make use of the wider color gamut where possible
  • I think the colors would need to be redefined in colors/_index.scss
  • Example of how to support both wide-gamut P3 and narrower gamuts: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#extra-p3-colors