P3 Color Support

[derekr]

Doing some early exploration of enabling display-p3 color. A preferable approach is setting custom properties based on a supports rule.

https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/

/* sRGB color. */
:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

header {
    color: var(--bright-green);
}

So wondering if there's a way of using globalCss to achieve something similar either through local scopes or some how toggling between multiple themes (base theme and display-p3 theme).

const globalStyles = stitchesConfig.globalCss({
	'@supports (color: color(display-p3 1 1 1))': {
		':root': {
			???
		}
	}
})

// or

const displayP3Theme = stitchesConfig.createTheme('dispaly-p3', {
	'$red': 'color(display-p3 0 1 0)'
})

// check for support and swap theme

[peduarte]

Hey, how about this:

import { createStitches } from "@stitches/react";

/**
 * What's happening:
 * 1. We define a `brightGreen` token with the "normal green"
 * 2. This token will be created as a CSS Custom Property: `colors-brightGreen`
 * 3. We then use the `globalCss` function to override the CSS Custom Property under a `@supports` rule
 * The reason for doing it this way is so you still get the token suggestion!
 */

const { styled, globalCss } = createStitches({
  theme: {
    colors: {
      // Define token (normal green)
      brightGreen: "rgb(0, 255, 0)"
    }
  }
});

const globalStyles = globalCss({
  // Target the `:root`
  ":root": {
    // Check for support
    "@supports (color: color(display-p3 1 1 1))": {
      // Override token
      "--colors-brightGreen": "color(display-p3 0 1 0)"
    }
  }
});


const Box = styled("div", {
  // Then use it!
  backgroundColor: "$brightGreen",
  padding: 50
});

Demo: https://codesandbox.io/s/awesome-swirles-9gn0c?file=/src/App.tsx

[peduarte]

Pro tip:

If you wanted to you could read the CSS Custom Property from theme

// Override token - read custom property from `theme`
[theme.colors.brightGreen.variable]: "color(display-p3 0 1 0)"

[derekr]

Yessss I hadn't needed to access theme tokens directly yet so it wasn't top of mind. This is legit 👍🏻.