search

sass / sass-site

Sass Website
https://sass-lang.com
Other
322 stars 233 forks source link

[Playground] Color Swatches #1214

Closed jamesnw closed 1 month ago

jamesnw commented 2 months ago

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[bot] commented 2 months ago

Deploy Preview for sass-lang ready!

Name Link
Latest commit c45807633d4e175b3cd99185cb8723685ab81a7b
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...

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 commented 1 month ago

Looks really good!

stacyk commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

Looks great, thanks!