[Playground] Color Swatches

[jamesnw]

Fixes #1189

Example-
https://deploy-preview-1214--sass-lang.netlify.app/playground/#eJxlkG1rwyAQx9/3UxxdCumIombpg33Tr2KMSd1MDRoHpeS7T11ghYEH9/C7+99J6TV4BVsvvOejmG/by+YlI62xLqYKwwFT1lw2re0ezw3AtbcOCg29syMQmC1QmvIARW7iYL+MvJVSGFlG7j3276MBY2R/ySBCrQkKvT0LvSDr9MAh+rl7+U+kYq7h2aJBjGEuf9kKOu0nIx5oqiswNiqiUd87tV+nXDvVhmHdK6WWaCIvKNoSH+CD7JLltVoOkxLyNoW+T7GMurKWye04uKEtKSMVqWidccUhjy2dkowwArgBzOLL1Z5Dkjgf8YEcd4Bog49NDeca16dTJoa1H4vuM/i5TF/WrDiLa61oBYVTUR830fOTkFH37+o8ab1yUi68hHq4W6c8jMHMejIKvkX8Ub9iyw9tNY9H

[netlify]

✅ Deploy Preview for sass-lang ready!

Name	Link
🔨 Latest commit	c458076
🔍 Latest deploy log	https://app.netlify.com/sites/sass-lang/deploys/6706e21058d0d3000828a6bd
😎 Deploy Preview	https://deploy-preview-1214--sass-lang.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nex3]

Let's make the warning sign more of a decoration on the swatch rather than a full-size inline element:

Suggested change

	display: inline-flex;
	div {
	background-color: var(--color);
	height: var(--sl-size--swatch);
	margin-inline-start: var(--sl-gutter--quarter);
	outline: var(--sl-border--small) solid var(--sl-color--text-medium-dark);
	outline-offset: calc(var(--sl-border--small) * -1);
	width: var(--sl-size--swatch);
	}
	span {
	font-family: var(--sl-font-family--emoji);
	// Make slightly larger
	font-size: var(--sl-font-size--small);
	// Adjusted to accommodate larger font-size
	line-height: 1.2;
	margin-inline-start: var(--sl-gutter--quarter);
	}
	position: relative;
	div {
	background-color: var(--color);
	height: var(--sl-size--swatch);
	margin-inline-start: var(--sl-gutter--quarter);
	outline: var(--sl-border--small) solid var(--sl-color--text-medium-dark);
	outline-offset: calc(var(--sl-border--small) * -1);
	width: var(--sl-size--swatch);
	}
	span {
	font-family: var(--sl-font-family--emoji);
	font-size: 0.5625rem;
	position: absolute;
	top: -0.3125rem;
	right: -0.3125rem;
	}

You could even replace the span with an ::after based on a class name, although I don't have a strong opinion about whether or not that's better.

[nex3]

Looks really good!

[stacyk]

@nex3 We added the overlapping warning and gave it a text-shadow while cleaning up a bit. We kept the span in order to have the tooltip when out of gamut. Here's a preview.

[nex3]

Can we make the warning images a little smaller? Having them around the same size as the color box itself feels like it distracts from the color value itself and makes what should be a minor advisory feel like a larger problem.

[stacyk]

@nex3 on Chrome the emoji itself wouldn't go smaller (with font-size) so I am using scale() now. This seems to be more consistent across different browsers now.

[nex3]

Looks great, thanks!