Replace polished dep with CSS relative color syntax and color-mix

.changeset/few-coats-smash.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Replace `polished` dependency with CSS relative color syntax and `color-mix`

package.json

@@ -99,7 +99,6 @@
     "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
-    "polished": "^4.2.2",
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",

src/Playroom/Toolbar/Toolbar.tsx

@@ -18,6 +18,8 @@ import SettingsIcon from '../icons/SettingsIcon';
 import { isMac } from '../../utils/formatting';
 
 import { CSSTransition } from 'react-transition-group';
+import { Box } from '../Box/Box';
+import { colorPaletteVars } from '../sprinkles.css';
 
 interface Props {
   themes: PlayroomProps['themes'];
@@ -118,6 +120,16 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
               <FramesIcon />
             </ToolbarItem>
 
+            <Box
+              style={{ backgroundColor: colorPaletteVars.background.positive }}
+            >
+              Foo
+            </Box>
+            <Box
+              style={{ backgroundColor: colorPaletteVars.background.critical }}
+            >
+              Foo
+            </Box>
             <ToolbarItem
               active={isPreviewOpen}
               title="Preview playroom"

src/Playroom/palettes.ts

@@ -1,5 +1,3 @@
-import { transparentize, mix, darken } from 'polished';
-
 const originalPalette = {
   blue0: '#e5f3ff',
   blue1: '#0088ff',
@@ -22,6 +20,35 @@ const originalPalette = {
   black: '#000',
 };
 
+const guard = (amount: number) => {
+  if (amount > 1 || amount < 0) {
+    throw new Error('Amount must be between 0 and 1 inclusive');
+  }
+
+  return amount;
+};
+
+/**
+ * Implementation of `transparentize` from polished but using native CSS
+ * @see https://polished.js.org/docs/#transparentize
+ */
+const transparentize = (amount: number, color: string) =>
+  `rgb(from ${color} r g b / calc(alpha - ${guard(amount)}))`;
+
+/**
+ * Implementation of `darken` from polished but using native CSS
+ * @see https://polished.js.org/docs/#darken
+ */
+const darken = (amount: number, color: string) =>
+  `hsl(from ${color} h s calc(l - ${guard(amount) * 100}))`;
+
+/**
+ * Implementation of `mix` from polished but using native CSS
+ * @see https://polished.js.org/docs/#mix
+ */
+const mix = (amount: number, color1: string, color2: string) =>
+  `color-mix(in srgb, ${color1} ${guard(amount) * 100}%, ${color2})`;
+
 export const light = {
   code: {
     text: originalPalette.black,