feat: Add dark mode support (#258)

.babelrc

@@ -7,6 +7,7 @@
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator"
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@vanilla-extract/babel-plugin"
   ]
 }

lib/makeWebpackConfig.js

@@ -5,6 +5,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 const getStaticTypes = require('./getStaticTypes');
 const makeDefaultWebpackConfig = require('./makeDefaultWebpackConfig');
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const playroomPath = path.resolve(__dirname, '..');
 const includePaths = [
@@ -97,34 +99,24 @@ module.exports = async (playroomConfig, options) => {
           ],
         },
         {
-          test: /\.less$/,
-          include: includePaths,
+          test: /\.vanilla\.css$/i,
+          include: playroomPath.includes('node_modules')
+            ? /node_modules\/playroom/
+            : undefined,
           use: [
-            require.resolve('style-loader'),
+            MiniCssExtractPlugin.loader,
             {
               loader: require.resolve('css-loader'),
               options: {
-                modules: {
-                  mode: 'local',
-                  localIdentName: '[name]__[local]--[contenthash:base64:5]',
-                },
-              },
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                postcssOptions: {
-                  plugins: [require('autoprefixer')()],
-                },
+                url: false,
               },
             },
-            require.resolve('less-loader'),
           ],
         },
         {
           test: /\.css$/,
           include: path.dirname(require.resolve('codemirror/package.json')),
-          use: [require.resolve('style-loader'), require.resolve('css-loader')],
+          use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
       ],
     },
@@ -163,6 +155,8 @@ module.exports = async (playroomConfig, options) => {
         filename: 'preview/index.html',
         publicPath: '../',
       }),
+      new VanillaExtractPlugin(),
+      new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
     ],
     devtool: !options.production && 'eval-source-map',

package.json

@@ -77,7 +77,11 @@
     "@types/prettier": "^2.2.3",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "autoprefixer": "^10.2.5",
+    "@vanilla-extract/babel-plugin": "^1.1.5",
+    "@vanilla-extract/css": "^1.7.0",
+    "@vanilla-extract/css-utils": "^0.1.2",
+    "@vanilla-extract/sprinkles": "^1.4.0",
+    "@vanilla-extract/webpack-plugin": "^2.1.8",
     "babel-loader": "^8.2.2",
     "classnames": "^2.3.1",
     "codemirror": "^5.59.4",
@@ -93,16 +97,14 @@
     "history": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",
     "intersection-observer": "^0.12.0",
-    "less": "^4.1.1",
-    "less-loader": "^8.0.0",
-    "less-vars-loader": "^1.1.0",
     "localforage": "^1.9.0",
     "locate-path": "^6.0.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
+    "mini-css-extract-plugin": "^2.6.0",
     "parse-prop-types": "^0.3.0",
+    "polished": "^4.1.4",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^5.2.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.14.1",
@@ -112,7 +114,6 @@
     "react-use": "^17.2.1",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
-    "style-loader": "^3.2.1",
     "typescript": "^4.3.2",
     "url-join": "^4.0.1",
     "use-debounce": "^3.3.0",

src/Playroom/Button/Button.css.ts

@@ -0,0 +1,85 @@
+import { style, createVar } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+
+export const reset = style([
+  sprinkles({
+    boxSizing: 'border-box',
+    border: 0,
+    margin: 'none',
+    padding: 'none',
+    appearance: 'none',
+    userSelect: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'flex',
+    placeItems: 'center',
+  }),
+  {
+    background: 'transparent',
+    outline: 'none',
+    textDecoration: 'none',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    height: vars.touchableSize,
+    WebkitTapHighlightColor: 'transparent',
+  },
+]);
+
+const highlightColor = createVar();
+
+export const base = style([
+  sprinkles({
+    borderRadius: 'large',
+    paddingY: 'none',
+    paddingX: 'large',
+    font: 'standard',
+  }),
+  {
+    vars: {
+      [highlightColor]: 'currentColor',
+    },
+    color: highlightColor,
+    border: `1px solid ${colorPaletteVars.foreground.neutralSoft}`,
+    height: calc(vars.grid).multiply(9).toString(),
+    ':hover': {
+      vars: {
+        [highlightColor]: colorPaletteVars.foreground.accent,
+      },
+      borderColor: highlightColor,
+    },
+    ':active': {
+      transform: 'scale(0.98)',
+    },
+    '::after': {
+      content: '',
+      position: 'absolute',
+      transform: 'translateY(-50%)',
+      minHeight: vars.touchableSize,
+      minWidth: vars.touchableSize,
+      left: calc(vars.grid).multiply(2).negate().toString(),
+      right: calc(vars.grid).multiply(2).negate().toString(),
+      height: '100%',
+      top: '50%',
+    },
+    selectors: {
+      [`&:focus:not(:active):not(:hover):not([disabled])`]: {
+        boxShadow: colorPaletteVars.shadows.focus,
+      },
+    },
+  },
+]);
+
+export const positive = style({
+  vars: {
+    [highlightColor]: `${colorPaletteVars.foreground.positive} !important`,
+  },
+  borderColor: highlightColor,
+});
+
+export const iconContainer = style([
+  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  {
+    top: '1px',
+  },
+]);

src/Playroom/Button/Button.tsx

@@ -1,8 +1,7 @@
 import React, { ElementType, AllHTMLAttributes, ReactElement } from 'react';
 import classnames from 'classnames';
 
-// @ts-ignore
-import styles from './Button.less';
+import * as styles from './Button.css';
 
 interface BaseProps {
   as?: ElementType;
@@ -32,6 +31,7 @@ export const Button = ({
     className={classnames(styles.reset, styles.base, {
       [styles.positive]: tone === 'positive',
     })}
+    disabled={tone === 'positive'}
     {...props}
   >
     {children}

src/Playroom/CatchErrors/CatchErrors.css.ts

@@ -0,0 +1,8 @@
+import { sprinkles } from '../sprinkles.css';
+
+export const root = sprinkles({
+  position: 'fixed',
+  inset: 0,
+  overflow: 'auto',
+  padding: 'xxlarge',
+});